303 lines
12 KiB
Vue
303 lines
12 KiB
Vue
<template>
|
|
<div class="FanList-content">
|
|
<el-row :gutter="10">
|
|
<el-col :span="8" v-for="(item, index) in props.parentData" style="margin-bottom: 10px;">
|
|
<div class="grid-content ep-bg-purple" @dblclick="handleDoubleClick(item)">
|
|
<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.name }}</span>
|
|
<el-tag v-if="item.attributeMap.iturbineoperationmode === 20" class="tag-panel is-primary" type="primary">并网</el-tag>
|
|
<el-tag v-if="item.attributeMap.iturbineoperationmode === 11" class="tag-panel is-warning" type="primary">待机</el-tag>
|
|
<el-tag v-if="item.attributeMap.iturbineoperationmode === 16" class="tag-panel is-success" type="primary">启动</el-tag>
|
|
<el-tag v-if="item.attributeMap.iturbineoperationmode === 10" class="tag-panel is-maintenance" type="primary">维护</el-tag>
|
|
<el-tag v-if="item.attributeMap.iturbineoperationmode === 0" class="tag-panel is-offline" type="primary">离线</el-tag>
|
|
<el-tag v-if="item.attributeMap.iturbineoperationmode === 8" class="tag-panel info" type="primary">限功率运行</el-tag>
|
|
<el-tag v-if="item.attributeMap.iturbineoperationmode === 6" class="tag-panel is-danger" type="primary">正常停机</el-tag>
|
|
<el-tag v-if="item.attributeMap.iturbineoperationmode === 1" class="tag-panel is-danger" type="primary">外部因素导致停机</el-tag>
|
|
<el-tag v-if="item.attributeMap.iturbineoperationmode === 2" class="tag-panel is-danger" type="primary">停机</el-tag>
|
|
<el-tag v-if="item.attributeMap.iturbineoperationmode === 1110" class="tag-panel is-info" type="primary">解缆状态</el-tag>
|
|
<el-tag v-if="item.attributeMap.iturbineoperationmode === 1111" class="tag-panel is-danger" type="primary">电网故障停机</el-tag>
|
|
<el-tag v-if="item.attributeMap.iturbineoperationmode === 1112" class="tag-panel is-danger" type="primary">安全链停机</el-tag>
|
|
</div>
|
|
<div class="fanlist-main">
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<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="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>
|
|
</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.attributeMap.iwindspeed }}</span><span>风速m/s</span></div>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<div class="fanlist-text"><span class="content-number">{{ item.attributeMap.igenpower }}</span><span>功率MW</span></div>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<div class="fanlist-text"><span class="content-number">{{ item.attributeMap.ikwhthisday }}</span><span>日发电量kWh</span></div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<div class="fanlist-bottom">
|
|
<el-tag v-if="item.attributeMap.locked === 1" class="tag-panel is-danger">已锁定</el-tag>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {ref,reactive,defineProps, defineEmits} from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { adminBaseRoutePath } from '/@/router/static/adminBase'
|
|
|
|
const router = useRouter()
|
|
const props = defineProps({
|
|
parentData: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
})
|
|
const emit = defineEmits(['StatusListData'])
|
|
const rotationspeed = 4;
|
|
const animationDuration=reactive({
|
|
'animation-duration': rotationspeed+'s',
|
|
})
|
|
const handleDoubleClick = (row) => {
|
|
if (!router.hasRoute('windTurbine')) {
|
|
router.addRoute('admin', {
|
|
path: adminBaseRoutePath+'/windTurbine',
|
|
name: 'windTurbine',
|
|
component: () => import('/@/views/backend/WindBlower/index.vue'),
|
|
meta: {
|
|
title: '单风机详情',
|
|
menuDesc: '单风机详情',
|
|
addtab: true,
|
|
},
|
|
})
|
|
}
|
|
|
|
router.push({
|
|
name: 'windTurbine',
|
|
query: {
|
|
irn: row.irn,
|
|
iotModelId: row.modelId,
|
|
name: row.name,
|
|
},
|
|
})
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@keyframes leafRotate {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
25%{
|
|
transform: rotate(90deg);
|
|
}
|
|
50%{
|
|
transform: rotate(180deg);
|
|
}
|
|
75%{
|
|
transform: rotate(270deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
.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: 30px;
|
|
vertical-align: middle;
|
|
}
|
|
.FanList-content{
|
|
overflow-x: hidden;
|
|
.FanList-panel{
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
.fanlist-top{
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
.fanlist-icon{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 40px;
|
|
height: 30px;
|
|
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;*/
|
|
padding: 10px 10px 0 10px;
|
|
text-align: center;
|
|
.fanlist-pic{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-top: -10px;
|
|
.mask{
|
|
width: 43px;
|
|
height: 38px;
|
|
.heart {
|
|
position: absolute;
|
|
text-align: center;
|
|
top: 5px;
|
|
left: 17px;
|
|
z-index: 3;
|
|
}
|
|
.leafs {
|
|
z-index: 1;
|
|
position: absolute;
|
|
/* animation: leafRotate 1s infinite linear;*/
|
|
transform-origin: center center;
|
|
width: 46px;
|
|
height: 46px;
|
|
/*animation-duration: 1s;*/
|
|
animation-name: leafRotate;
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: linear;
|
|
.leaf_1 {
|
|
width: 9px;
|
|
height: 19px;
|
|
position: absolute;
|
|
left: 17px;
|
|
top: -1px;
|
|
/* transform-origin: left top;*/
|
|
}
|
|
.leaf_2 {
|
|
width: 9px;
|
|
height: 19px;
|
|
position: absolute;
|
|
left: 31px;
|
|
top: 20px;
|
|
/* transform-origin: left top;*/
|
|
transform: rotate(120deg);
|
|
}
|
|
.leaf_3 {
|
|
width: 9px;
|
|
height: 19px;
|
|
position: absolute;
|
|
left: 5px;
|
|
top: 22px;
|
|
/*transform-origin: left top;*/
|
|
transform: rotate(240deg);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.fanlist-text{
|
|
margin-top:20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.content-number{
|
|
color: #333333;
|
|
font-size: 20px;
|
|
}
|
|
|
|
}
|
|
.fanlist-text span{
|
|
display: inline-block;
|
|
}
|
|
|
|
}
|
|
.fanlist-bottom{
|
|
display: flex;
|
|
justify-content: end;
|
|
height: 24px;
|
|
.tag-panel{
|
|
border-radius: 0 0 8px 0;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|