238 lines
8.3 KiB
Vue
238 lines
8.3 KiB
Vue
|
<template>
|
||
|
|
<div class="FanList-content">
|
||
|
|
<el-row :gutter="10">
|
||
|
|
<el-col :span="8" v-for="(item, index) in FanList" style="margin-bottom: 10px;">
|
||
|
|
<div class="grid-content ep-bg-purple">
|
||
|
|
<div class="FanList-panel" :class="item.standard==true ? 'wind-mark' : 'wind-default'">
|
||
|
|
<div class="fanlist-top">
|
||
|
|
<span :class="item.standard==true ? 'wind-mark-icon' : 'fanlist-icon'">
|
||
|
|
<img :class="item.standard==true ? '' : 'wind-picture'" src="~assets/dashboard/biaogan.png" alt="">
|
||
|
|
</span>
|
||
|
|
<span class="fanlist-name"> {{ item.windTurbine }}</span>
|
||
|
|
<el-tag class="tag-panel" :class="getItemClass(item)" type="primary">{{ item.windStatus }}</el-tag>
|
||
|
|
</div>
|
||
|
|
<div class="fanlist-main">
|
||
|
|
<el-row>
|
||
|
|
<el-col :span="24">
|
||
|
|
<div class="fanlist-pic">
|
||
|
|
<!-- <div class="mask">
|
||
|
|
<div class="leafs">
|
||
|
|
<div class="leaf_1"></div>
|
||
|
|
<div class="leaf_2"></div>
|
||
|
|
<div class="leaf_3"></div>
|
||
|
|
</div>
|
||
|
|
</div>-->
|
||
|
|
<img src="~assets/dashboard/fanlist1.png" alt="">
|
||
|
|
<!-- <img class="fc" src="~assets/dashboard/fanlist1.png" alt=""></img>-->
|
||
|
|
<!-- <img :style="{ transform: `rotate(${rotationDegrees}deg)` }" src="~assets/dashboard/fanlist1.png" alt="">-->
|
||
|
|
</div>
|
||
|
|
<div class="fanlist-pic">
|
||
|
|
<img src="~assets/dashboard/fanlist2.png" alt="">
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
<el-row class="fanlist-data">
|
||
|
|
<el-col :span="8">
|
||
|
|
<div class="fanlist-text"><span class="content-number">{{ item.windSpeed }}</span><span>风速m/s</span></div>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="8">
|
||
|
|
<div class="fanlist-text"><span class="content-number">{{ item.power }}</span><span>功率MW</span></div>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="8">
|
||
|
|
<div class="fanlist-text"><span class="content-number">{{ item.dayGeneration }}</span><span>日发电量kWh</span></div>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref ,onMounted,onUnmounted } from 'vue'
|
||
|
|
|
||
|
|
const FanList = ref([
|
||
|
|
{windSpeed:'10.34','power':'10.34','dayGeneration':'10.34',windStatus:'并网',windTurbine:'A-001',standard:true},
|
||
|
|
{windSpeed:'34','power':'10.34','dayGeneration':'10.34',windStatus:'待机',windTurbine:'A-002',standard:false},
|
||
|
|
{windSpeed:'11','power':'10.34','dayGeneration':'10.34',windStatus:'启动',windTurbine:'A-003',standard:false},
|
||
|
|
{windSpeed:'45','power':'10.34','dayGeneration':'10.34',windStatus:'解缆',windTurbine:'A-004',standard:false},
|
||
|
|
{windSpeed:'12','power':'10.34','dayGeneration':'10.34',windStatus:'电网故障停机',windTurbine:'A-005',standard:false},
|
||
|
|
{windSpeed:'10','power':'10.34','dayGeneration':'10.34',windStatus:'维护',windTurbine:'A-006',standard:false}
|
||
|
|
])
|
||
|
|
|
||
|
|
const getItemClass = (FanList) => {
|
||
|
|
switch (FanList.windStatus) {
|
||
|
|
case '并网':
|
||
|
|
return 'is-primary';
|
||
|
|
case '并网- AGC限功率':
|
||
|
|
return 'is-primary';
|
||
|
|
case '解缆':
|
||
|
|
return 'is-info';
|
||
|
|
case '待机':
|
||
|
|
return 'is-warning';
|
||
|
|
case '故障':
|
||
|
|
return 'is-warning';
|
||
|
|
case '启动':
|
||
|
|
return 'is-success';
|
||
|
|
case '电网故障停机':
|
||
|
|
return 'is-danger';
|
||
|
|
case '风速超限停机':
|
||
|
|
return 'is-danger';
|
||
|
|
case '故障停机':
|
||
|
|
return 'is-danger';
|
||
|
|
case '塔基手动停机':
|
||
|
|
return 'is-danger';
|
||
|
|
case '远程监控停机':
|
||
|
|
return 'is-danger';
|
||
|
|
case 'AGC停机':
|
||
|
|
return 'is-danger';
|
||
|
|
case '集控停机':
|
||
|
|
return 'is-danger';
|
||
|
|
case '小风停机':
|
||
|
|
return 'is-danger';
|
||
|
|
case '维护':
|
||
|
|
return 'is-maintenance';
|
||
|
|
default:
|
||
|
|
return '';
|
||
|
|
}
|
||
|
|
return { FanList, getItemClass };
|
||
|
|
};
|
||
|
|
|
||
|
|
const rotationDegrees = ref(0)
|
||
|
|
const speed = 5; // 设定一个基本旋转速度
|
||
|
|
function startRotation(speed) {
|
||
|
|
return setInterval(() => {
|
||
|
|
rotationDegrees.value += 100;
|
||
|
|
}, 100); // 每100毫秒旋转一次
|
||
|
|
}
|
||
|
|
let intervalId;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
// 当组件挂载时开始旋转
|
||
|
|
intervalId = startRotation(speed);
|
||
|
|
});
|
||
|
|
|
||
|
|
onUnmounted(() => {
|
||
|
|
// 当组件卸载时清除定时器
|
||
|
|
clearInterval(intervalId);
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.wind-mark{
|
||
|
|
background-image: linear-gradient(140deg, #FFE3E3 0%, #FFFFFF 93%);
|
||
|
|
border: 1px solid #FFE3E3;
|
||
|
|
}
|
||
|
|
.wind-default{
|
||
|
|
background-image: linear-gradient(180deg, #F0F6FF 0%, #FFFFFF 50%);
|
||
|
|
border: 1px solid #E1EDF6;
|
||
|
|
}
|
||
|
|
.wind-picture{
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.wind-mark-icon{
|
||
|
|
background: #FFFFFF;
|
||
|
|
border: 1px solid #FFE3E3;
|
||
|
|
border-radius: 8px 0 100px 0;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
width: 40px;
|
||
|
|
height: 40px;
|
||
|
|
vertical-align: middle;
|
||
|
|
}
|
||
|
|
|
||
|
|
.FanList-panel{
|
||
|
|
border-radius: 8px;
|
||
|
|
.fanlist-top{
|
||
|
|
display: flex;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
.fanlist-icon{
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
width: 40px;
|
||
|
|
height: 40px;
|
||
|
|
vertical-align: middle;
|
||
|
|
}
|
||
|
|
.fanlist-name{
|
||
|
|
width: 100%;
|
||
|
|
margin-top: 5px;
|
||
|
|
}
|
||
|
|
.tag-panel{
|
||
|
|
border-radius: 0 8px 0 0;
|
||
|
|
line-height: 20px;
|
||
|
|
}
|
||
|
|
.is-primary{
|
||
|
|
background: rgba(2,119,179,0.20);
|
||
|
|
border: 1px solid #0277B3;
|
||
|
|
color: #0277B3;
|
||
|
|
}
|
||
|
|
.is-success{
|
||
|
|
background: rgba(6,180,41,0.20);
|
||
|
|
border: 1px solid #06B429;
|
||
|
|
color: #06B429;
|
||
|
|
}
|
||
|
|
.is-info{
|
||
|
|
background: rgba(48,89,236,0.20);
|
||
|
|
border: 1px solid #3059EC;
|
||
|
|
color: #3059EC;
|
||
|
|
}
|
||
|
|
.is-warning{
|
||
|
|
background: rgba(255,126,0,0.20);
|
||
|
|
border: 1px solid #FF7E00;
|
||
|
|
color: #FF7E00;
|
||
|
|
}
|
||
|
|
.is-danger{
|
||
|
|
background: rgba(254,55,49,0.20);
|
||
|
|
border: 1px solid #FE3731;
|
||
|
|
color: #FE3731;
|
||
|
|
}
|
||
|
|
.is-offline{
|
||
|
|
background: rgba(153,153,153,0.20);
|
||
|
|
border: 1px solid #999999;
|
||
|
|
color: #999999;
|
||
|
|
}
|
||
|
|
.is-maintenance{
|
||
|
|
background: rgba(0,160,150,0.20);
|
||
|
|
border: 1px solid #00A096;
|
||
|
|
color: #00A096;
|
||
|
|
}
|
||
|
|
.fanlist-main{
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
padding: 10px;
|
||
|
|
text-align: center;
|
||
|
|
.fanlist-pic{
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
margin-top: -10px;
|
||
|
|
.mask{
|
||
|
|
width: 43px;
|
||
|
|
height: 38px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.fanlist-text{
|
||
|
|
margin-top:30px;
|
||
|
|
.content-number{
|
||
|
|
color: #333333;
|
||
|
|
font-size: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
.fanlist-text span{
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|