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

首页：绑定叶轮转速

Browse Source
This commit is contained in:
fengrong 2024-11-13 17:28:29 +08:00
parent 4ed42b06fb
commit 8c7e57d3b8
2 changed files with 69 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
ui/dasadmin/src/views/backend/dashboard.vue
View File

@ -17,7 +17,7 @@
<div>功率</div> <div>功率</div>
</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="" /> <img class="small-panel-pic" src="~assets/dashboard/viewW.png" alt="" />
<div class="small-base"> <div class="small-base">
<div> <div>
@ -504,6 +504,7 @@ const StatusListData = () => {
ikwhthisday: item.attributeMap.ikwhthisday, ikwhthisday: item.attributeMap.ikwhthisday,
iturbineoperationmode: state, iturbineoperationmode: state,
locked: item.attributeMap.locked, locked: item.attributeMap.locked,
irotorspeed:item.attributeMap.irotorspeed,
}, },
} }
}) })
@ -1157,8 +1158,8 @@ const computedHeight = reactive({
const sizeChange = () => { const sizeChange = () => {
const rect = HomeHight.value?.getBoundingClientRect() const rect = HomeHight.value?.getBoundingClientRect()
if (!rect) return if (!rect) return
computedHeight.powerHeight = rect.height - 636 + 'px' computedHeight.powerHeight = rect.height - 630 + 'px'
computedHeight.alarmHeight = rect.height - 580 + 'px' computedHeight.alarmHeight = rect.height - 578 + 'px'
computedHeight.centerHeight = rect.height - 0 + 'px' computedHeight.centerHeight = rect.height - 0 + 'px'
if (window.screen.width < 1360) { if (window.screen.width < 1360) {
computedHeight.alarmHeight = '200px' computedHeight.alarmHeight = '200px'
@ -1211,7 +1212,6 @@ $labelHeight: 38px;
width: 100%; width: 100%;
height: $labelHeight; height: $labelHeight;
font-size: 18px; font-size: 18px;
line-height: 18px;
font-weight: 600; font-weight: 600;
color: #4e5969; color: #4e5969;
line-height: 38px; line-height: 38px;
@ -1220,13 +1220,18 @@ $labelHeight: 38px;
} }
.default-main { .default-main {
width: 100%; width: 100%;
// height: 100%; height: 100%;
// min-height: 920px; min-height: 920px;
padding: 0; padding: 0;
margin: 0; margin: 0;
color: #4e5969; color: #4e5969;
background-color: #f2f3f5; background-color: #f2f3f5;
overflow: hidden; .el-row{
width: calc(100% - 0px);
.el-col{
height: calc(100% - 10px);
}
}
.content-number { .content-number {
color: #333333; color: #333333;
font-size: 20px; font-size: 20px;
@ -1315,7 +1320,7 @@ $labelHeight: 38px;
@include cardDefaultStyle; @include cardDefaultStyle;
@include cardlabel; @include cardlabel;
width: 100%; width: 100%;
min-height: 298px; min-height: 290px;
height: v-bind('computedHeight.powerHeight'); height: v-bind('computedHeight.powerHeight');
.chartBox { .chartBox {
height: calc(100% - $labelHeight); height: calc(100% - $labelHeight);
@ -1326,14 +1331,15 @@ $labelHeight: 38px;
} }
} }
.matrix { .matrix {
/* @include cardDefaultStyle;
@include cardlabel;*/
background: url('/@/assets/dashboard/bg1.png') no-repeat #ffffff; background: url('/@/assets/dashboard/bg1.png') no-repeat #ffffff;
background-size: 100% 100%; background-size: 100% 100%;
min-height: 900px; min-height: 900px;
width: 100%; width: 100%;
height: v-bind('computedHeight.centerHeight'); height: v-bind('computedHeight.centerHeight');
margin-bottom: 0; margin-bottom: 0;
.el-scrollbar{
height: calc(100% - 20px);
}
} }
.summarize { .summarize {
padding: 10px; padding: 10px;
@ -1341,7 +1347,6 @@ $labelHeight: 38px;
background-color: #fff; background-color: #fff;
margin-bottom: 20px; margin-bottom: 20px;
word-break: keep-all; word-break: keep-all;
/*@include cardDefaultStyle;*/
@include cardlabel; @include cardlabel;
min-height: 224px; min-height: 224px;
.summarize-panel-list { .summarize-panel-list {
@ -1375,14 +1380,8 @@ $labelHeight: 38px;
} }
} }
} }
.cardContentRight {
width: 100%;
height: 100%;
}
.trend { .trend {
/* @include cardDefaultStyle;
@include cardlabel;*/
min-height: 300px; min-height: 300px;
height: 335px; height: 335px;
overflow: hidden; overflow: hidden;
@ -1428,12 +1427,13 @@ $labelHeight: 38px;
/* @include cardDefaultStyle; /* @include cardDefaultStyle;
@include cardlabel;*/ @include cardlabel;*/
/*height: 370px;*/ /*height: 370px;*/
min-height: 350px; min-height: 340px;
height: v-bind('computedHeight.alarmHeight'); height: v-bind('computedHeight.alarmHeight');
} }
} }
} }
@media screen and (max-width: 1920px) { @media screen and (max-width: 1920px) {
.default-main { .default-main {
.trend { .trend {
@ -1443,20 +1443,36 @@ $labelHeight: 38px;
} }
@media screen and (max-width: 1280px) { @media screen and (max-width: 1280px) {
.default-main { .default-main {
/*height: auto !important;*/
overflow: none; overflow: none;
.windtitle{
margin-bottom: 10px;
}
.summarize { .summarize {
.summarize-panel { .summarize-panel {
margin: 2px !important; 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) { @media screen and (max-width: 1360px) {
.default-main { .default-main {
font-size: 11px !important;
.overview { .overview {
.small-panel { .small-panel {
.small-base { .small-base {
margin-left: 0px !important; margin-left: 0px !important;
font-size: 11px !important;
} }
} }
} }
@ -1491,6 +1507,9 @@ $labelHeight: 38px;
margin-bottom: 10px !important; margin-bottom: 10px !important;
} }
.grid-content { .grid-content {
.cardLabel{
font-size: 16px !important;
}
.panelBg { .panelBg {
/* padding: 10px !important;*/ /* padding: 10px !important;*/
margin-bottom: 10px !important; margin-bottom: 10px !important;
@ -1507,7 +1526,7 @@ $labelHeight: 38px;
padding: 0 !important; padding: 0 !important;
} }
.matrix { .matrix {
height: 908px !important; height: 900px !important;
} }
:deep(.el-tabs__header) { :deep(.el-tabs__header) {
margin-top: -33px !important; margin-top: -33px !important;

41
ui/dasadmin/src/views/backend/home/windMatrix.vue
View File

@ -28,7 +28,7 @@
<div class="fanlist-pic"> <div class="fanlist-pic">
<div class="mask"> <div class="mask">
<div class="heart"><img src="~assets/dashboard/leaf2.png" alt=""></div> <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_1"> <img src="~assets/dashboard/leaf1.png" alt=""></div>
<div class="leaf_2"><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> <div class="leaf_3"><img src="~assets/dashboard/leaf1.png" alt=""></div>
@ -68,7 +68,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import {ref,reactive,defineProps, defineEmits} from 'vue' import {defineProps, defineEmits,onMounted,onUnmounted} from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { adminBaseRoutePath } from '/@/router/static/adminBase' import { adminBaseRoutePath } from '/@/router/static/adminBase'
@ -79,11 +79,19 @@ const props = defineProps({
default: () => [] default: () => []
} }
}) })
const emit = defineEmits(['StatusListData'])
const rotationspeed = 4;
const animationDuration=reactive({ const getAnimationStyle = (item) => {
'animation-duration': rotationspeed+'s', 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) => { const handleDoubleClick = (row) => {
if (!router.hasRoute('windTurbine')) { if (!router.hasRoute('windTurbine')) {
router.addRoute('admin', { router.addRoute('admin', {
@ -108,7 +116,6 @@ const handleDoubleClick = (row) => {
}) })
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@ -241,8 +248,8 @@ const handleDoubleClick = (row) => {
height: 46px; height: 46px;
/*animation-duration: 1s;*/ /*animation-duration: 1s;*/
animation-name: leafRotate; animation-name: leafRotate;
animation-iteration-count: infinite; /*animation-iteration-count: infinite;
animation-timing-function: linear; animation-timing-function: linear;*/
.leaf_1 { .leaf_1 {
width: 9px; width: 9px;
height: 19px; 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> </style>