sx/map
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

单风机:调整页面布局

Browse Source
This commit is contained in:
高云鹏 2024-12-20 17:16:57 +08:00
parent 1922229261
commit fc1910a9ba
1 changed files with 106 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
ui/dasadmin/src/views/backend/WindBlower/index.vue
View File

@ -59,11 +59,16 @@
</div>
</div>
<!--功率趋势-->
<div class="power">
<div class="cardLabel">功率趋势</div>
<div class="chartBox">
<div class="power-chart" ref="powerChartRef"></div>
<!--温度-->
<div class="temperatureList">
<div class="chartPart-item" @click="openTemperature">
<div class="chartParm" ref="temperatureChartRef1"></div>
</div>
<div class="chartPart-item" @click="openTemperature">
<div class="chartParm" ref="temperatureChartRef2"></div>
</div>
<div class="chartPart-item" @click="openTemperature">
<div class="chartParm" ref="temperatureChartRef3"></div>
</div>
</div>
</div>
@ -137,16 +142,12 @@
<div @click="openSubSystem(11)" class="dot index-12"></div>
</el-tooltip>
</div>
<!-- 温度 -->
<!-- 功率趋势 -->
<div class="chartPart">
<div class="chartPart-item" @click="openTemperature">
<div class="chartParm" ref="temperatureChartRef1"></div>
<div class="power">
<div class="chartBox">
<div class="power-chart" ref="powerChartRef"></div>
</div>
<div class="chartPart-item" @click="openTemperature">
<div class="chartParm" ref="temperatureChartRef2"></div>
</div>
<div class="chartPart-item" @click="openTemperature">
<div class="chartParm" ref="temperatureChartRef3"></div>
</div>
<div class="chartPart-item item_bar">
<div class="frequencyChart" ref="frequencyChartRef"></div>
@ -382,8 +383,18 @@ const initpowerChart = () => {
const powerChart = state.charts.powerChart ?? echarts.init(powerChartRef.value as unknown as HTMLElement)
const option = {
title: {
show: true,
text: '功率趋势',
textStyle: {
color: '#4E5969',
fontSize: 14,
fontFamily: 'PingFangSC-Semibold',
},
padding: 10,
},
grid: {
top: 50,
top: 70,
right: 23,
bottom: 10,
left: 18,
@ -485,6 +496,7 @@ const initpowerChart = () => {
textStyle: {
color: '#73767a',
},
top: 20,
},
series: [
{
@ -715,17 +727,21 @@ const initTemperatureChart = () => {
const option = {
grid: {
top: 30,
//right: 100,
right: 5,
bottom: 0,
left: -100,
containLabel: true,
},
xAxis: {
type: 'category',
// type: 'category',
type: 'value',
show: false,
},
yAxis: {
type: 'value',
// type: 'value',
type: 'category',
show: false,
},
series: [
@ -735,8 +751,9 @@ const initTemperatureChart = () => {
type: 'bar',
label: {
show: true,
align: 'center',
formatter: `{a|{c}}\n{b|{a}}`,
align: 'left',
// verticalAlign:'top',
formatter: `{b|{a}} {a|{c}}`,
rich: {
a: {
color: '#333333',
@ -747,12 +764,14 @@ const initTemperatureChart = () => {
fontSize: 14,
},
},
position: 'insideBottom',
offset: [62, 0],
width: 100,
height: 22,
position: 'insideLeft',
offset: [85, -22],
},
itemStyle: {
color: '#048bd2',
borderRadius: [0, 0, 4, 4],
borderRadius: [0, 4, 4, 0],
},
barWidth: 20,
},
@ -835,7 +854,7 @@ const initFrequencyChart = () => {
fontSize: 14,
fontFamily: 'PingFangSC-Semibold',
},
padding: 15,
padding: 10,
},
],
polar: {
@ -1241,8 +1260,9 @@ const getThisDayChartDataForMinute = () => {
const getAllChartData = (type: ('power' | 'trend' | 'frequency')[] = ['power', 'trend', 'frequency']) => {
if (type.includes('power')) {
getThisDayChartData().then(() => {
nextTick(() => {
initpowerChart()
// initTemperatureChart()
})
})
}
// if (type.includes('trend')) {
@ -1254,8 +1274,10 @@ const getAllChartData = (type: ('power' | 'trend' | 'frequency')[] = ['power', '
// }
if (type.includes('frequency')) {
getThisDayChartDataForMinute().then((res) => {
nextTick(() => {
initFrequencyChart()
})
})
}
}
@ -1609,23 +1631,50 @@ $labelHeight: 24px;
}
}
}
.power {
.temperatureList {
@include cardDefaultStyle;
@include cardlabel;
display: flex;
flex-direction: column;
justify-content: space-around;
margin: 10px 0;
width: 100%;
height: calc(40% - 20px);
// min-height: 285px;
// height: v-bind('computedHeight.powerHeight');
.chartBox {
.chartPart-item {
// margin: 5px 0;
width: 100%;
height: calc(100% - $labelHeight);
.power-chart {
height: calc(33.3% - 10px);
background: #f0f6ff;
border-radius: 8px;
// text-align: center;
color: #4e5969;
.chartParm {
width: 100%;
height: 100%;
}
.frequencyChart {
width: 100%;
height: 100%;
}
}
}
// .power {
// @include cardDefaultStyle;
// @include cardlabel;
// margin: 10px 0;
// width: 100%;
// height: calc(40% - 20px);
// // min-height: 285px;
// // height: v-bind('computedHeight.powerHeight');
// .chartBox {
// width: 100%;
// height: calc(100% - $labelHeight);
// .power-chart {
// width: 100%;
// height: 100%;
// }
// }
// }
}
.cardContentCenter {
@include cardDefaultStyle;
@ -1846,18 +1895,29 @@ $labelHeight: 24px;
&:hover {
cursor: pointer;
}
.chartPart-item {
margin: 5px;
width: 25%;
.power {
margin-bottom: 5px;
width: 60%;
height: 100%;
background: #f0f6ff;
background-color: #f0f6ff;
border-radius: 8px;
// text-align: center;
color: #4e5969;
.chartParm {
.chartBox {
width: 100%;
height: 100%;
.power-chart {
width: 100%;
height: 100%;
}
}
}
.chartPart-item {
margin: 0 0 5px 5px;
// width: 25%;
height: 100%;
background: #f0f6ff;
border-radius: 8px;
color: #4e5969;
.frequencyChart {
width: 100%;
height: 100%;