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