首页样式优化
This commit is contained in:
fengrong
parent
116cd62e59
commit
777cf26100
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<div class="default-main" ref="HomeHight">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<div class="grid-content ep-bg-purple">
|
||||
@ -55,7 +55,7 @@
|
||||
<el-text class="mx-1 homelabel" style="margin-bottom: 0">今日运行状态</el-text>
|
||||
<el-row :gutter="10" class="statusrow" style="margin-bottom: 0">
|
||||
<el-col :span="12">
|
||||
<div class="status-panel">
|
||||
<div class="status-panel toal-panel">
|
||||
<img class="status-panel-pic" src="~assets/dashboard/status1.png" alt="" />
|
||||
<div class="status-base-main">
|
||||
<div>
|
||||
@ -66,7 +66,7 @@
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="status-panel">
|
||||
<div class="status-panel toal-panel">
|
||||
<img class="status-panel-pic" src="~assets/dashboard/status2.png" alt="" />
|
||||
<div class="status-base-main">
|
||||
<div>
|
||||
@ -199,12 +199,10 @@
|
||||
|
||||
<!--功率趋势-->
|
||||
<div class="power panelBg" style="margin-bottom: 0; padding-bottom: 10px">
|
||||
<el-text class="mx-1 homelabel">功率趋势</el-text>
|
||||
<el-row :gutter="10">
|
||||
<el-col class="lg-mb-20" :span="24">
|
||||
<div class="power-chart" ref="powerChartRef"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="cardLabel">功率趋势</div>
|
||||
<div class="chartBox">
|
||||
<div class="power-chart" ref="powerChartRef"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
@ -219,75 +217,60 @@
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="grid-content ep-bg-purple">
|
||||
<div class="grid-content ep-bg-purple cardContentRight">
|
||||
<!--发电量概况-->
|
||||
<div class="summarize panelBg">
|
||||
<div class="summarize-title">
|
||||
<el-text class="mx-1 homelabel">发电量概况</el-text>
|
||||
<!-- <el-text class="mx-1" style="margin-bottom: 20px;">
|
||||
当日发电量
|
||||
<span class="content-number" style="color: #0277B3;">{{realData.attributeMap.windfarmdayprodenergy}}</span>
|
||||
kWh
|
||||
</el-text>-->
|
||||
<div class="summarize">
|
||||
<div class="cardLabel">发电量概况</div>
|
||||
<div class="summarize-panel-list">
|
||||
<div class="summarize-panel">
|
||||
<div class="summarize-panel-pic">
|
||||
<img src="~assets/dashboard/fdl1.png" alt="" />
|
||||
</div>
|
||||
<div class="summarize-panel-base">
|
||||
<div>
|
||||
<span class="content-number">{{ realData.attributeMap.windfarmdayprodenergy }}</span>
|
||||
</div>
|
||||
<div>kWh</div>
|
||||
<div>日发电量</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="summarize-panel">
|
||||
<div class="summarize-panel-pic">
|
||||
<img src="~assets/dashboard/fdl2.png" alt="" />
|
||||
</div>
|
||||
<div class="summarize-panel-base">
|
||||
<div>
|
||||
<span class="content-number">{{ realData.attributeMap.windfarmmonthprodenergy }}</span>
|
||||
</div>
|
||||
<div>kWh</div>
|
||||
<div>月发电量</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="summarize-panel">
|
||||
<div class="summarize-panel-pic">
|
||||
<img src="~assets/dashboard/fdl3.png" alt="" />
|
||||
</div>
|
||||
<div class="summarize-panel-base">
|
||||
<div>
|
||||
<span class="content-number">{{ realData.attributeMap.windfarmyearprodenergy }}</span>
|
||||
</div>
|
||||
<div>kWh</div>
|
||||
<div>年发电量</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="summarize-panel">
|
||||
<div class="summarize-panel-pic">
|
||||
<img src="~assets/dashboard/fdl4.png" alt="" />
|
||||
</div>
|
||||
<div class="summarize-panel-base">
|
||||
<div>
|
||||
<span class="content-number">{{ realData.attributeMap.windfarmtotalprodenergy }}</span>
|
||||
</div>
|
||||
<div>kWh</div>
|
||||
<div>总发电量</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-row :gutter="5">
|
||||
<el-col :span="6">
|
||||
<div class="summarize-panel">
|
||||
<div class="summarize-panel-pic">
|
||||
<img src="~assets/dashboard/fdl1.png" alt="" />
|
||||
</div>
|
||||
<div class="summarize-panel-base">
|
||||
<div>
|
||||
<span class="content-number">{{ realData.attributeMap.windfarmdayprodenergy }}</span>
|
||||
</div>
|
||||
<div><span>kWh</span></div>
|
||||
<div><span>日发电量</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="summarize-panel">
|
||||
<div class="summarize-panel-pic">
|
||||
<img src="~assets/dashboard/fdl2.png" alt="" />
|
||||
</div>
|
||||
<div class="summarize-panel-base">
|
||||
<div>
|
||||
<span class="content-number">{{ realData.attributeMap.windfarmmonthprodenergy }}</span>
|
||||
</div>
|
||||
<div><span>kWh</span></div>
|
||||
<div><span>月发电量</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="summarize-panel">
|
||||
<div class="summarize-panel-pic">
|
||||
<img src="~assets/dashboard/fdl3.png" alt="" />
|
||||
</div>
|
||||
<div class="summarize-panel-base">
|
||||
<div>
|
||||
<span class="content-number">{{ realData.attributeMap.windfarmyearprodenergy }}</span>
|
||||
</div>
|
||||
<div><span>kWh</span></div>
|
||||
<div><span>年发电量</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="summarize-panel">
|
||||
<div class="summarize-panel-pic">
|
||||
<img src="~assets/dashboard/fdl4.png" alt="" />
|
||||
</div>
|
||||
<div class="summarize-panel-base">
|
||||
<div>
|
||||
<span class="content-number">{{ realData.attributeMap.windfarmtotalprodenergy }}</span>
|
||||
</div>
|
||||
<div><span>kWh</span></div>
|
||||
<div><span>总发电量</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<!--发电量趋势-->
|
||||
@ -749,7 +732,7 @@ const inittrendChart = (type: 'day' | 'month') => {
|
||||
grid: {
|
||||
top: 30,
|
||||
right: 10,
|
||||
bottom: 20,
|
||||
bottom: 30,
|
||||
left: 25,
|
||||
borderColor: '#dadada',
|
||||
},
|
||||
@ -1138,24 +1121,6 @@ const tabhandleClick = () => {
|
||||
inittrendChart(trendChartType.value)
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getAllChartData()
|
||||
createScroll()
|
||||
overviewList()
|
||||
StatusListData()
|
||||
autoUpdate()
|
||||
|
||||
equipList({ objectType: 10002 }).then((res) => {
|
||||
res.data.map((item: any) => {
|
||||
deviceCode.value.push(item.name)
|
||||
})
|
||||
|
||||
getTableData(deviceCode.value)
|
||||
})
|
||||
useEventListener(window, 'resize', echartsResize)
|
||||
})
|
||||
|
||||
const activeName = ref('first')
|
||||
//let autoUpdateTimer: any = null
|
||||
let autoUpdateForSecondTimer: any = null
|
||||
@ -1181,8 +1146,44 @@ const autoUpdate = () => {
|
||||
}, 60000 * 30)
|
||||
}
|
||||
}
|
||||
const HomeHight = ref()
|
||||
const computedHeight = reactive({
|
||||
powerHeight: '298px',
|
||||
centerHeight: '1100px',
|
||||
alarmHeight: '350px',
|
||||
})
|
||||
const sizeChange = () => {
|
||||
const rect = HomeHight.value?.getBoundingClientRect()
|
||||
if (!rect) return
|
||||
computedHeight.powerHeight = rect.height - 636 + 'px'
|
||||
computedHeight.alarmHeight = rect.height - 580 + 'px'
|
||||
computedHeight.centerHeight = rect.height - 0 + 'px'
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('resize', sizeChange)
|
||||
sizeChange()
|
||||
getAllChartData()
|
||||
createScroll()
|
||||
overviewList()
|
||||
StatusListData()
|
||||
autoUpdate()
|
||||
|
||||
equipList({ objectType: 10002 }).then((res) => {
|
||||
res.data.map((item: any) => {
|
||||
deviceCode.value.push(item.name)
|
||||
})
|
||||
|
||||
getTableData(deviceCode.value)
|
||||
})
|
||||
useEventListener(window, 'resize', echartsResize)
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', sizeChange)
|
||||
clearInterval(timer)
|
||||
autoUpdateForSecondTimer && clearInterval(autoUpdateForSecondTimer)
|
||||
const chartKeys = Object.keys(state.charts) as Array<keyof typeof state.charts>
|
||||
@ -1193,32 +1194,37 @@ onUnmounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@media screen and (max-width: 1910px) {
|
||||
.default-main {
|
||||
.content-number {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
.homelabel {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
.grid-content {
|
||||
.panelBg {
|
||||
padding: 10px !important;
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
}
|
||||
.col-center {
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
$marginNum: 10px;
|
||||
$labelHeight: 38px;
|
||||
@mixin cardDefaultStyle {
|
||||
margin-top: $marginNum;
|
||||
margin-bottom: $marginNum;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
background-color: #fff;
|
||||
}
|
||||
@mixin cardlabel {
|
||||
.cardLabel {
|
||||
width: 100%;
|
||||
height: $labelHeight;
|
||||
font-size: 18px;
|
||||
line-height: 18px;
|
||||
font-weight: 600;
|
||||
color: #4e5969;
|
||||
line-height: 38px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
.default-main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 920px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: #4e5969;
|
||||
background-color: #f2f3f5;
|
||||
overflow-x: hidden;
|
||||
overflow: hidden;
|
||||
.content-number {
|
||||
color: #333333;
|
||||
font-size: 20px;
|
||||
@ -1234,6 +1240,7 @@ onUnmounted(() => {
|
||||
display: block;
|
||||
}
|
||||
.grid-content {
|
||||
/* overflow-x: hidden;*/
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.panelBg {
|
||||
@ -1243,6 +1250,9 @@ onUnmounted(() => {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.overview {
|
||||
/* @include cardDefaultStyle;
|
||||
@include cardlabel;*/
|
||||
min-height: 216px;
|
||||
.small-panel {
|
||||
display: flex;
|
||||
border: 1px solid #e1edf6;
|
||||
@ -1253,12 +1263,16 @@ onUnmounted(() => {
|
||||
height: 36px;
|
||||
}
|
||||
.small-base {
|
||||
word-break: keep-all;
|
||||
margin-left: 10px;
|
||||
color: #2c3f5d;
|
||||
}
|
||||
}
|
||||
}
|
||||
.status {
|
||||
/* @include cardDefaultStyle;
|
||||
@include cardlabel;*/
|
||||
min-height: 374px;
|
||||
.statusrow {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
@ -1276,6 +1290,7 @@ onUnmounted(() => {
|
||||
height: 60px;
|
||||
}
|
||||
.status-base-main {
|
||||
word-break: keep-all;
|
||||
margin-left: 10px;
|
||||
line-height: 23px;
|
||||
padding-top: 6px;
|
||||
@ -1295,46 +1310,82 @@ onUnmounted(() => {
|
||||
}
|
||||
}
|
||||
.power {
|
||||
.power-chart {
|
||||
width: 100%;
|
||||
height: 288px;
|
||||
}
|
||||
@media screen and (max-width: 1920px) {
|
||||
@include cardDefaultStyle;
|
||||
@include cardlabel;
|
||||
width: 100%;
|
||||
min-height: 298px;
|
||||
height: v-bind('computedHeight.powerHeight');
|
||||
.chartBox{
|
||||
height: calc(100% - $labelHeight);
|
||||
.power-chart {
|
||||
height: 230px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1910px) {
|
||||
.power-chart {
|
||||
height: 230px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.matrix {
|
||||
/* @include cardDefaultStyle;
|
||||
@include cardlabel;*/
|
||||
background: url('/@/assets/dashboard/bg1.png') no-repeat #ffffff;
|
||||
background-size: 100% 100%;
|
||||
height: 100%;
|
||||
min-height: 900px;
|
||||
width: 100%;
|
||||
height: v-bind('computedHeight.centerHeight');
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.summarize {
|
||||
.summarize-title {
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
background-color: #fff;
|
||||
margin-bottom: 20px;
|
||||
word-break: keep-all;
|
||||
/*@include cardDefaultStyle;*/
|
||||
@include cardlabel;
|
||||
min-height: 224px;
|
||||
.summarize-panel-list {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.summarize-panel {
|
||||
background: #f0f6ff;
|
||||
border-radius: 10px;
|
||||
margin: 5px;
|
||||
padding: 10px;
|
||||
.summarize-panel-pic {
|
||||
text-align: center;
|
||||
}
|
||||
width: 25%;
|
||||
display: flex;
|
||||
padding: 20px 0;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: #f0f6ff;
|
||||
border-radius: 10px;
|
||||
.summarize-panel-base {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
color: rgb(78, 89, 105);
|
||||
.content-number {
|
||||
color: #333333;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.cardContentRight {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
|
||||
.trend {
|
||||
height: 370px;
|
||||
/* @include cardDefaultStyle;
|
||||
@include cardlabel;*/
|
||||
min-height: 300px;
|
||||
height: 335px;
|
||||
overflow: hidden;
|
||||
.trend-tabs {
|
||||
:deep(.el-tabs__item) {
|
||||
@ -1375,40 +1426,101 @@ onUnmounted(() => {
|
||||
}
|
||||
}
|
||||
.realPart {
|
||||
height: 370px;
|
||||
}
|
||||
@media screen and (max-width: 1920px) {
|
||||
/* .matrix {
|
||||
height: 928px;
|
||||
}*/
|
||||
.realPart {
|
||||
height: 349px;
|
||||
}
|
||||
.trend {
|
||||
height: 315px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1910px) {
|
||||
.matrix {
|
||||
height: 875px;
|
||||
}
|
||||
.realPart {
|
||||
height: 343px;
|
||||
}
|
||||
.trend {
|
||||
height: 315px;
|
||||
}
|
||||
/* @include cardDefaultStyle;
|
||||
@include cardlabel;*/
|
||||
/*height: 370px;*/
|
||||
min-height: 350px;
|
||||
height: v-bind('computedHeight.alarmHeight');
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1910px) {
|
||||
.default-main {
|
||||
height: 878px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1920px) {
|
||||
.default-main {
|
||||
height: 928px;
|
||||
.trend {
|
||||
height: 315px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1280px) {
|
||||
.default-main {
|
||||
.summarize {
|
||||
.summarize-panel{
|
||||
margin: 2px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1360px) {
|
||||
.default-main {
|
||||
.overview{
|
||||
.small-panel{
|
||||
.small-base {
|
||||
margin-left: 0px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1480px) {
|
||||
.default-main {
|
||||
font-size: 12px !important;
|
||||
.overview{
|
||||
.small-panel{
|
||||
padding: 13px 0px !important;
|
||||
}
|
||||
}
|
||||
.status {
|
||||
.status-panel {
|
||||
.status-base-main{
|
||||
margin-left: 5px !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1680px) {
|
||||
.default-main {
|
||||
/*font-size: 12px !important;*/
|
||||
.content-number {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
.homelabel {
|
||||
font-size: 16px !important;
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
.grid-content {
|
||||
.panelBg {
|
||||
/* padding: 10px !important;*/
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
.summarize{
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
}
|
||||
.toal-panel{
|
||||
padding: 0 !important;
|
||||
padding-bottom: 10px !important;
|
||||
}
|
||||
.col-center {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.matrix{
|
||||
height: 908px !important;
|
||||
}
|
||||
:deep(.el-tabs__header) {
|
||||
margin-top: -33px !important;
|
||||
}
|
||||
.overview{
|
||||
.small-panel{
|
||||
.small-base {
|
||||
margin-left: 5px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -148,7 +148,7 @@ const handleDoubleClick = (row) => {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
height: 30px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@ -164,7 +164,7 @@ const handleDoubleClick = (row) => {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
height: 30px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.fanlist-name{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user