风机矩阵修改固定宽高 总览图加图标
This commit is contained in:
fengrong
parent
a7c4353328
commit
1b92d84825
@ -23,14 +23,14 @@
|
||||
<div class="small-base">实时无功:<span>{{ realData.attributeMap.windfarmreactivepower}}kVar</span></div>
|
||||
<div class="small-base">日发电量:<span>{{ realData.attributeMap.windfarmdayprodenergy}}万kWh</span></div>
|
||||
<div class="small-base">月发电量:<span>{{ realData.attributeMap.windfarmmonthprodenergy}}万kWh</span></div>
|
||||
<div class="small-base">年发电量:<span>{{ realData.attributeMap.windfarmyearprodenergy}}万kWh</span></div>
|
||||
<div style="padding: 0;" class="small-base">年发电量:<span>{{ realData.attributeMap.windfarmyearprodenergy}}万kWh</span></div>
|
||||
</div>
|
||||
<div class="overviewItem" style="border: none;">
|
||||
<div class="small-base">并网:<span>{{ realData.attributeMap.turbinecountpowerprod}}台</span></div>
|
||||
<div class="small-base">停机/待机:<span>{{ realData.attributeMap.turbinecountidle}}台</span></div>
|
||||
<div class="small-base">故障:<span>{{ realData.attributeMap.turbinecountfaulted}}台</span></div>
|
||||
<div class="small-base">维护:<span>{{ realData.attributeMap.turbinecountservice}}台</span></div>
|
||||
<div style="padding: 0;" class="small-base">无通讯:<span>{{ realData.attributeMap.turbinecountdisconnected}}台</span></div>
|
||||
<div class="small-base"><i class="powerprod"></i>并网:<span>{{ realData.attributeMap.turbinecountpowerprod}}台</span></div>
|
||||
<div class="small-base"><i class="idle"></i>停机/待机:<span>{{ realData.attributeMap.turbinecountidle}}台</span></div>
|
||||
<div class="small-base"><i class="faulted"></i>故障:<span>{{ realData.attributeMap.turbinecountfaulted}}台</span></div>
|
||||
<div class="small-base"><i class="service"></i>维护:<span>{{ realData.attributeMap.turbinecountservice}}台</span></div>
|
||||
<div style="padding: 0;" class="small-base"><i class="disconnected"></i>无通讯:<span>{{ realData.attributeMap.turbinecountdisconnected}}台</span></div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -359,23 +359,6 @@ const StatusListData = () => {
|
||||
})
|
||||
}
|
||||
let malFunctionEnums: any = {}
|
||||
/*const getMalfunctionEnums = () => {
|
||||
windList.value.forEach((item)=> {
|
||||
console.log({madeinfactory: item.madeinfactory, model: item.model })
|
||||
queryfaultCodeDict({madeinfactory: item.madeinfactory, model: item.model }).then((res) => {
|
||||
if (res.code == 200) {
|
||||
const data: any = {}
|
||||
res.data.forEach((item: any) => {
|
||||
data[item.code] = item.description
|
||||
})
|
||||
malFunctionEnums = data
|
||||
} else {
|
||||
console.warn('查询故障代码字典失败:', res.message);
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
}*/
|
||||
|
||||
/*const requestedParams = new Set<string>();
|
||||
|
||||
@ -535,40 +518,69 @@ $labelHeight: 30px;
|
||||
height: v-bind('computedHeight.centerHeight');
|
||||
margin-bottom: 0;
|
||||
.el-scrollbar {
|
||||
height: calc(100% - 20px);
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
.homeHeader{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-start;
|
||||
/*justify-content: space-between;*/
|
||||
.cardLabel{
|
||||
margin-right: 10px;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
vertical-align: middle
|
||||
}
|
||||
.cardBtn{
|
||||
white-space: nowrap;
|
||||
:deep(.el-radio-group){
|
||||
flex-wrap: nowrap;
|
||||
|
||||
}
|
||||
:deep(.el-radio){
|
||||
margin-right: 12px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.headerRight{
|
||||
width: 100%;
|
||||
/*width: 100%;*/
|
||||
margin-left: auto;
|
||||
text-align: right;
|
||||
display: flex;
|
||||
background: #F0F6FF;
|
||||
border-radius: 8px;
|
||||
line-height: 30px;
|
||||
padding: 0 10px;
|
||||
.overviewItem{
|
||||
display: inline-block;
|
||||
.small-base{
|
||||
display: inline-block;
|
||||
padding-right: 8px;
|
||||
padding-right: 15px;
|
||||
color: #4E5969;
|
||||
i{
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
aspect-ratio: 1 / 1;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.powerprod{
|
||||
background-color: #0277B3;
|
||||
}
|
||||
.idle{
|
||||
background-color: #FFB600;
|
||||
}
|
||||
.faulted{
|
||||
background-color: #FE3731;
|
||||
}
|
||||
.service{
|
||||
background-color: #00A096;
|
||||
}
|
||||
.disconnected{
|
||||
background-color: #999999;
|
||||
}
|
||||
span{
|
||||
color: #000000;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
<template>
|
||||
<div class="FanList-content">
|
||||
<el-row :gutter="10">
|
||||
<el-col :xs="12" :sm="8" :md="8" :lg="4" :xl="3" v-for="item in props.parentData" style="margin-bottom: 5px">
|
||||
<div class="grid-content ep-bg-purple"
|
||||
<!-- <el-row :gutter="10">
|
||||
<el-col :xs="12" :sm="8" :md="8" :lg="4" :xl="3" v-for="item in props.parentData" style="margin-bottom: 5px">-->
|
||||
<div class="overviewPart" v-for="item in props.parentData">
|
||||
<div class="grid-content"
|
||||
@click="handleClick(item)"
|
||||
@contextmenu.prevent="windContextMenu($event,item)"
|
||||
>
|
||||
@ -37,9 +38,40 @@
|
||||
>通讯中断</el-tag>
|
||||
</div>
|
||||
<div class="fanlist-main">
|
||||
<WindContentleft :item="item" v-if="item.layout==='风格1'"></WindContentleft>
|
||||
<WindContentright :item="item" v-else-if="item.layout==='风格2'"></WindContentright>
|
||||
<WindContentcenter :item="item" v-else-if="item.layout==='风格3'"></WindContentcenter>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<div class="fanlist-pic">
|
||||
<div class="mask">
|
||||
<div class="heart"><img :src="getSafeImagePath(item, 'heart')" alt="" /></div>
|
||||
<div class="leafs" :style="getAnimationStyle(item)">
|
||||
<div class="leaf_1"><img :src="getSafeImagePath(item, 'leaf')" alt="" /></div>
|
||||
<div class="leaf_2"><img :src="getSafeImagePath(item, 'leaf')" alt="" /></div>
|
||||
<div class="leaf_3"><img :src="getSafeImagePath(item, 'leaf')" alt="" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fanlist-pic">
|
||||
<img :src="getSafeImagePath(item, 'fan')" alt="" />
|
||||
</div>
|
||||
<!-- <div class="fanlist-pic" style="margin: 0;">
|
||||
<img src="~assets/dashboard/fannew/base.png" alt="" />
|
||||
</div>-->
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row class="fanlist-data">
|
||||
<div class="fanlist-text">
|
||||
<span class="content-number">{{ item.attributeMap.iwindspeed }}</span>
|
||||
<span>m/s</span>
|
||||
</div>
|
||||
<div class="fanlist-text">
|
||||
<span class="content-number">{{ item.attributeMap.igenpower }}</span>
|
||||
<span>kW</span>
|
||||
</div>
|
||||
<div class="fanlist-text">
|
||||
<span class="content-number">{{ item.attributeMap.ikwhthisday }}</span>
|
||||
<span>kWh</span>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="fanlist-bottom">
|
||||
<!-- <el-tag class="tag-panel is-danger">已锁定</el-tag>-->
|
||||
@ -48,8 +80,9 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<!-- </el-col>
|
||||
</el-row>-->
|
||||
|
||||
<ContextMenu :pos="contextMenuPos" v-model:visible="OperateVisible">
|
||||
<template #default>
|
||||
@ -105,6 +138,31 @@ const props = defineProps({
|
||||
default: () => [],
|
||||
},
|
||||
})
|
||||
const getAnimationStyle = (item) => {
|
||||
const irotorspeed = item.attributeMap?.irotorspeed ?? 0
|
||||
let animationDuration;
|
||||
animationDuration = 60 / irotorspeed / 3
|
||||
const processedoperationmode = item.attributeMap?.processedoperationmode ?? 0
|
||||
if(processedoperationmode==33){
|
||||
return {
|
||||
'animation-duration': `0s`,
|
||||
'animation-timing-function': 'linear',
|
||||
'animation-iteration-count': 'infinite',
|
||||
'animation-direction': 'normaL',
|
||||
}
|
||||
}else{
|
||||
|
||||
return {
|
||||
'animation-duration': `${animationDuration}s`,
|
||||
'animation-timing-function': 'linear',
|
||||
'animation-iteration-count': 'infinite',
|
||||
'animation-direction': 'normaL',
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
const handleClick = (row) => {
|
||||
if (!router.hasRoute('windTurbine')) {
|
||||
router.addRoute('admin', {
|
||||
@ -264,6 +322,92 @@ const hexToRgba = (hex, alpha) => {
|
||||
}
|
||||
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
|
||||
}
|
||||
const imagePathMap = {
|
||||
'#9C27B0': {
|
||||
heart: 'heart1.png',
|
||||
leaf: 'leaf1.png',
|
||||
fan: 'fan1.png',
|
||||
},
|
||||
'#673AB7': {
|
||||
heart: 'heart2.png',
|
||||
leaf: 'leaf2.png',
|
||||
fan: 'fan2.png',
|
||||
},
|
||||
'#3F51B5': {
|
||||
heart: 'heart3.png',
|
||||
leaf: 'leaf3.png',
|
||||
fan: 'fan3.png',
|
||||
},
|
||||
'#3059EC': {
|
||||
heart: 'heart4.png',
|
||||
leaf: 'leaf4.png',
|
||||
fan: 'fan4.png',
|
||||
},
|
||||
'#0277B3': {
|
||||
heart: 'heart5.png',
|
||||
leaf: 'leaf5.png',
|
||||
fan: 'fan5.png',
|
||||
},
|
||||
'#00A096': {
|
||||
heart: 'heart6.png',
|
||||
leaf: 'leaf6.png',
|
||||
fan: 'fan6.png',
|
||||
},
|
||||
'#06B429': {
|
||||
heart: 'heart7.png',
|
||||
leaf: 'leaf7.png',
|
||||
fan: 'fan7.png',
|
||||
},
|
||||
'#64DD17': {
|
||||
heart: 'heart8.png',
|
||||
leaf: 'leaf8.png',
|
||||
fan: 'fan8.png',
|
||||
},
|
||||
'#EEFF41': {
|
||||
heart: 'heart9.png',
|
||||
leaf: 'leaf9.png',
|
||||
fan: 'fan9.png',
|
||||
},
|
||||
'#FFB600': {
|
||||
heart: 'heart10.png',
|
||||
leaf: 'leaf10.png',
|
||||
fan: 'fan10.png',
|
||||
},
|
||||
'#FF7E00': {
|
||||
heart: 'heart11.png',
|
||||
leaf: 'leaf11.png',
|
||||
fan: 'fan11.png',
|
||||
},
|
||||
'#FE3731': {
|
||||
heart: 'heart12.png',
|
||||
leaf: 'leaf12.png',
|
||||
fan: 'fan12.png',
|
||||
},
|
||||
'#999999': {
|
||||
heart: 'heart13.png',
|
||||
leaf: 'leaf13.png',
|
||||
fan: 'fan13.png',
|
||||
}
|
||||
};
|
||||
|
||||
const getImagePath = (item, type) => {
|
||||
const color = item.attributeMap.color;
|
||||
return imagePathMap[color]?.[type];
|
||||
};
|
||||
|
||||
const getSafeImagePath = (item, type) => {
|
||||
const path = getImagePath(item, type);
|
||||
if (!getSafeImagePath.cache) {
|
||||
getSafeImagePath.cache = {};
|
||||
}
|
||||
if (getSafeImagePath.cache[path]) {
|
||||
return getSafeImagePath.cache[path];
|
||||
}
|
||||
const imagePath = new URL(`/src/assets/dashboard/fan/${path}`, import.meta.url).href;
|
||||
getSafeImagePath.cache[path] = imagePath;
|
||||
return imagePath;
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -312,6 +456,16 @@ const hexToRgba = (hex, alpha) => {
|
||||
}
|
||||
.FanList-content {
|
||||
overflow-x: hidden;
|
||||
display: grid;
|
||||
justify-content: space-between;
|
||||
grid-template-columns: repeat(auto-fill, 170px);
|
||||
.overviewPart{
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
width: 170px;
|
||||
height: 140px;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
.FanList-panel {
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
@ -455,6 +609,7 @@ const hexToRgba = (hex, alpha) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.modelOperate{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -411,59 +411,66 @@ const getSafeImagePath = (item, type) => {
|
||||
return imagePath;
|
||||
|
||||
};
|
||||
|
||||
const getFaultDescription=(item)=>{
|
||||
//getMalfunctionEnums(item)
|
||||
fetchData(item)
|
||||
/*fetchData(item)
|
||||
let firsttriggeredcode=item.attributeMap.firsttriggeredcode
|
||||
if (malFunctionKeys.includes('FirstTriggeredCode')) {
|
||||
firsttriggeredcode = malFunctionEnums?.[firsttriggeredcode] ?? firsttriggeredcode
|
||||
}
|
||||
return firsttriggeredcode
|
||||
return firsttriggeredcode*/
|
||||
const key = `${item.madeinFactory}-${item.model}`;
|
||||
if (failedRequests.has(key)) {
|
||||
return '';
|
||||
}
|
||||
|
||||
let malFunctionEnums: any = {}
|
||||
/*const getMalfunctionEnums = (item) => {
|
||||
/!*queryfaultCodeDict({ madeinfactory: item!.madeinFactory, model: item!.model }).then((res) => {*!/
|
||||
queryfaultCodeDict({ madeinfactory: '广东明阳风电', model: 'MY1.5/89' }).then((res) => {
|
||||
if (res.code == 200) {
|
||||
const data: any = {}
|
||||
res.data.forEach((item: any) => {
|
||||
data[item.code] = item.description
|
||||
})
|
||||
malFunctionEnums = data
|
||||
if (!malFunctionEnums[key]) {
|
||||
fetchData(item); // 如果还没有请求过，则发起请求
|
||||
// return item.attributeMap.firsttriggeredcode;
|
||||
}
|
||||
|
||||
let firsttriggeredcode = item.attributeMap.firsttriggeredcode;
|
||||
if (malFunctionKeys.includes('FirstTriggeredCode') && malFunctionEnums[key]) {
|
||||
if(firsttriggeredcode==0){
|
||||
return ''
|
||||
}else{
|
||||
console.warn('查询故障代码字典失败:', res.message);
|
||||
firsttriggeredcode = malFunctionEnums[key][firsttriggeredcode] ?? '';
|
||||
}
|
||||
}
|
||||
return firsttriggeredcode;
|
||||
}
|
||||
})
|
||||
}*/
|
||||
|
||||
let malFunctionEnums: { [key: string]: { [code: string]: string } } = {};
|
||||
const requestedParams = new Set<string>();
|
||||
const failedRequests = new Set<string>();
|
||||
|
||||
const fetchData = async (item: any) => {
|
||||
const key = `${item.madeinFactory}-${item.model}`;
|
||||
|
||||
if (requestedParams.has(key)) {
|
||||
console.log('Duplicate request detected, skipping...');
|
||||
return;
|
||||
}
|
||||
requestedParams.add(key);
|
||||
|
||||
try {
|
||||
malFunctionEnums={}
|
||||
const response = await queryfaultCodeDict({ madeinfactory: item.madeinFactory, model: item.model });
|
||||
if (response.code === 200) {
|
||||
const data: any = {};
|
||||
response.data.forEach((item: any) => {
|
||||
data[item.code] = item.description;
|
||||
});
|
||||
malFunctionEnums = data;
|
||||
//malFunctionEnums = data;
|
||||
malFunctionEnums[key] = data;
|
||||
} else {
|
||||
console.warn('查询故障代码字典失败:', response.message);
|
||||
failedRequests.add(key);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('请求出错:', error);
|
||||
//console.error('查询故障代码字典失败', error);
|
||||
failedRequests.add(key);
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user