单风机:调整页面布局
This commit is contained in:
高云鹏
parent
1922229261
commit
fc1910a9ba
@ -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>
|
||||
<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 class="power">
|
||||
<div class="chartBox">
|
||||
<div class="power-chart" ref="powerChartRef"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chartPart-item item_bar">
|
||||
<div class="frequencyChart" ref="frequencyChartRef"></div>
|
||||
@ -237,12 +238,12 @@
|
||||
<el-scrollbar>
|
||||
<div class="PitchPart">
|
||||
<!-- <el-row > -->
|
||||
<!-- <el-col :span="12"> -->
|
||||
<div class="Pitchitem" v-for="item in subSystemDataList" :key="item.name">
|
||||
<span class="PitchitemLeft">{{ item.name }}</span>
|
||||
<span class="PitchitemRight">{{ item.value }}</span>
|
||||
</div>
|
||||
<!-- </el-col> -->
|
||||
<!-- <el-col :span="12"> -->
|
||||
<div class="Pitchitem" v-for="item in subSystemDataList" :key="item.name">
|
||||
<span class="PitchitemLeft">{{ item.name }}</span>
|
||||
<span class="PitchitemRight">{{ item.value }}</span>
|
||||
</div>
|
||||
<!-- </el-col> -->
|
||||
<!-- </el-row> -->
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
@ -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(() => {
|
||||
initpowerChart()
|
||||
// initTemperatureChart()
|
||||
nextTick(() => {
|
||||
initpowerChart()
|
||||
})
|
||||
})
|
||||
}
|
||||
// if (type.includes('trend')) {
|
||||
@ -1254,7 +1274,9 @@ const getAllChartData = (type: ('power' | 'trend' | 'frequency')[] = ['power', '
|
||||
// }
|
||||
if (type.includes('frequency')) {
|
||||
getThisDayChartDataForMinute().then((res) => {
|
||||
initFrequencyChart()
|
||||
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;
|
||||
}
|
||||
.power {
|
||||
margin-bottom: 5px;
|
||||
width: 60%;
|
||||
height: 100%;
|
||||
background-color: #f0f6ff;
|
||||
border-radius: 8px;
|
||||
.chartBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.power-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chartPart-item {
|
||||
margin: 5px;
|
||||
width: 25%;
|
||||
margin: 0 0 5px 5px;
|
||||
// width: 25%;
|
||||
height: 100%;
|
||||
background: #f0f6ff;
|
||||
border-radius: 8px;
|
||||
// text-align: center;
|
||||
color: #4e5969;
|
||||
.chartParm {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.frequencyChart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user