首页：绑定叶轮转速
This commit is contained in:
fengrong
parent
4ed42b06fb
commit
8c7e57d3b8
@ -17,7 +17,7 @@
|
||||
<div>功率</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :sm="24" :lg="6" class="small-panel">
|
||||
<div :sm="24" :lg="6" class="small-panel windtitle">
|
||||
<img class="small-panel-pic" src="~assets/dashboard/viewW.png" alt="" />
|
||||
<div class="small-base">
|
||||
<div>
|
||||
@ -504,6 +504,7 @@ const StatusListData = () => {
|
||||
ikwhthisday: item.attributeMap.ikwhthisday,
|
||||
iturbineoperationmode: state,
|
||||
locked: item.attributeMap.locked,
|
||||
irotorspeed:item.attributeMap.irotorspeed,
|
||||
},
|
||||
}
|
||||
})
|
||||
@ -1157,8 +1158,8 @@ const computedHeight = reactive({
|
||||
const sizeChange = () => {
|
||||
const rect = HomeHight.value?.getBoundingClientRect()
|
||||
if (!rect) return
|
||||
computedHeight.powerHeight = rect.height - 636 + 'px'
|
||||
computedHeight.alarmHeight = rect.height - 580 + 'px'
|
||||
computedHeight.powerHeight = rect.height - 630 + 'px'
|
||||
computedHeight.alarmHeight = rect.height - 578 + 'px'
|
||||
computedHeight.centerHeight = rect.height - 0 + 'px'
|
||||
if (window.screen.width < 1360) {
|
||||
computedHeight.alarmHeight = '200px'
|
||||
@ -1211,7 +1212,6 @@ $labelHeight: 38px;
|
||||
width: 100%;
|
||||
height: $labelHeight;
|
||||
font-size: 18px;
|
||||
line-height: 18px;
|
||||
font-weight: 600;
|
||||
color: #4e5969;
|
||||
line-height: 38px;
|
||||
@ -1220,13 +1220,18 @@ $labelHeight: 38px;
|
||||
}
|
||||
.default-main {
|
||||
width: 100%;
|
||||
// height: 100%;
|
||||
// min-height: 920px;
|
||||
height: 100%;
|
||||
min-height: 920px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: #4e5969;
|
||||
background-color: #f2f3f5;
|
||||
overflow: hidden;
|
||||
.el-row{
|
||||
width: calc(100% - 0px);
|
||||
.el-col{
|
||||
height: calc(100% - 10px);
|
||||
}
|
||||
}
|
||||
.content-number {
|
||||
color: #333333;
|
||||
font-size: 20px;
|
||||
@ -1315,7 +1320,7 @@ $labelHeight: 38px;
|
||||
@include cardDefaultStyle;
|
||||
@include cardlabel;
|
||||
width: 100%;
|
||||
min-height: 298px;
|
||||
min-height: 290px;
|
||||
height: v-bind('computedHeight.powerHeight');
|
||||
.chartBox {
|
||||
height: calc(100% - $labelHeight);
|
||||
@ -1326,14 +1331,15 @@ $labelHeight: 38px;
|
||||
}
|
||||
}
|
||||
.matrix {
|
||||
/* @include cardDefaultStyle;
|
||||
@include cardlabel;*/
|
||||
background: url('/@/assets/dashboard/bg1.png') no-repeat #ffffff;
|
||||
background-size: 100% 100%;
|
||||
min-height: 900px;
|
||||
width: 100%;
|
||||
height: v-bind('computedHeight.centerHeight');
|
||||
margin-bottom: 0;
|
||||
.el-scrollbar{
|
||||
height: calc(100% - 20px);
|
||||
}
|
||||
}
|
||||
.summarize {
|
||||
padding: 10px;
|
||||
@ -1341,7 +1347,6 @@ $labelHeight: 38px;
|
||||
background-color: #fff;
|
||||
margin-bottom: 20px;
|
||||
word-break: keep-all;
|
||||
/*@include cardDefaultStyle;*/
|
||||
@include cardlabel;
|
||||
min-height: 224px;
|
||||
.summarize-panel-list {
|
||||
@ -1375,14 +1380,8 @@ $labelHeight: 38px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cardContentRight {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.trend {
|
||||
/* @include cardDefaultStyle;
|
||||
@include cardlabel;*/
|
||||
min-height: 300px;
|
||||
height: 335px;
|
||||
overflow: hidden;
|
||||
@ -1428,12 +1427,13 @@ $labelHeight: 38px;
|
||||
/* @include cardDefaultStyle;
|
||||
@include cardlabel;*/
|
||||
/*height: 370px;*/
|
||||
min-height: 350px;
|
||||
min-height: 340px;
|
||||
height: v-bind('computedHeight.alarmHeight');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 1920px) {
|
||||
.default-main {
|
||||
.trend {
|
||||
@ -1443,20 +1443,36 @@ $labelHeight: 38px;
|
||||
}
|
||||
@media screen and (max-width: 1280px) {
|
||||
.default-main {
|
||||
/*height: auto !important;*/
|
||||
overflow: none;
|
||||
.windtitle{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.summarize {
|
||||
.summarize-panel {
|
||||
margin: 2px !important;
|
||||
.summarize-panel-base {
|
||||
white-space: normal !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1366px) {
|
||||
.default-main {
|
||||
.summarize {
|
||||
word-break: break-all !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1360px) {
|
||||
.default-main {
|
||||
font-size: 11px !important;
|
||||
.overview {
|
||||
.small-panel {
|
||||
.small-base {
|
||||
margin-left: 0px !important;
|
||||
font-size: 11px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1491,6 +1507,9 @@ $labelHeight: 38px;
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
.grid-content {
|
||||
.cardLabel{
|
||||
font-size: 16px !important;
|
||||
}
|
||||
.panelBg {
|
||||
/* padding: 10px !important;*/
|
||||
margin-bottom: 10px !important;
|
||||
@ -1507,7 +1526,7 @@ $labelHeight: 38px;
|
||||
padding: 0 !important;
|
||||
}
|
||||
.matrix {
|
||||
height: 908px !important;
|
||||
height: 900px !important;
|
||||
}
|
||||
:deep(.el-tabs__header) {
|
||||
margin-top: -33px !important;
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
<div class="fanlist-pic">
|
||||
<div class="mask">
|
||||
<div class="heart"><img src="~assets/dashboard/leaf2.png" alt=""></div>
|
||||
<div class="leafs" :style="animationDuration">
|
||||
<div class="leafs" :style="getAnimationStyle(item)">
|
||||
<div class="leaf_1"> <img src="~assets/dashboard/leaf1.png" alt=""></div>
|
||||
<div class="leaf_2"><img src="~assets/dashboard/leaf1.png" alt=""></div>
|
||||
<div class="leaf_3"><img src="~assets/dashboard/leaf1.png" alt=""></div>
|
||||
@ -68,7 +68,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref,reactive,defineProps, defineEmits} from 'vue'
|
||||
import {defineProps, defineEmits,onMounted,onUnmounted} from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { adminBaseRoutePath } from '/@/router/static/adminBase'
|
||||
|
||||
@ -79,11 +79,19 @@ const props = defineProps({
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(['StatusListData'])
|
||||
const rotationspeed = 4;
|
||||
const animationDuration=reactive({
|
||||
'animation-duration': rotationspeed+'s',
|
||||
})
|
||||
|
||||
|
||||
const getAnimationStyle = (item) => {
|
||||
const irotorspeed = item.attributeMap?.irotorspeed ?? 0;
|
||||
const animationDuration = 1 / irotorspeed * 10;
|
||||
return {
|
||||
'animation-duration': `${animationDuration}s`,
|
||||
'animation-timing-function': 'linear',
|
||||
'animation-iteration-count': 'infinite',
|
||||
'animation-direction': 'normaL',
|
||||
};
|
||||
};
|
||||
|
||||
const handleDoubleClick = (row) => {
|
||||
if (!router.hasRoute('windTurbine')) {
|
||||
router.addRoute('admin', {
|
||||
@ -108,7 +116,6 @@ const handleDoubleClick = (row) => {
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -241,8 +248,8 @@ const handleDoubleClick = (row) => {
|
||||
height: 46px;
|
||||
/*animation-duration: 1s;*/
|
||||
animation-name: leafRotate;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
/*animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;*/
|
||||
.leaf_1 {
|
||||
width: 9px;
|
||||
height: 19px;
|
||||
@ -299,4 +306,18 @@ const handleDoubleClick = (row) => {
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1680px) {
|
||||
.FanList-content{
|
||||
.FanList-panel{
|
||||
.fanlist-text{
|
||||
font-size: 12px !important;
|
||||
.content-number{
|
||||
font-size: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user