首页
This commit is contained in:
fengrong
parent
ed28c7ad7a
commit
a5feaea801
@ -63,69 +63,6 @@
|
|||||||
<div class="small-title">年发电量</div>
|
<div class="small-title">年发电量</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- <el-col :xs="1" :sm="1" :md="1" :lg="1">
|
|
||||||
<img class="small-panel-pic" src="~assets/dashboard/overview07.png" alt="" />
|
|
||||||
</el-col>
|
|
||||||
|
|
||||||
<el-col :xs="4" :sm="3" :md="3" :lg="3">
|
|
||||||
<div class="small-base">
|
|
||||||
|
|
||||||
<div class="small-value">
|
|
||||||
<span class="content-number">{{realData.attributeMap.windfarmavgwindspeed}}</span>
|
|
||||||
<span>m/s</span>
|
|
||||||
</div>
|
|
||||||
<div class="small-title">平均风速</div>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="3" :sm="4" :md="4" :lg="4">
|
|
||||||
<div class="small-base">
|
|
||||||
<div class="small-value">
|
|
||||||
<span class="content-number">{{realData.attributeMap.windfarmactivepower}}</span>
|
|
||||||
<span>kW</span>
|
|
||||||
</div>
|
|
||||||
<div class="small-title">实时有功</div>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="4" :sm="4" :md="4" :lg="4">
|
|
||||||
<div class="small-base">
|
|
||||||
<div class="small-value">
|
|
||||||
<span class="content-number">{{realData.attributeMap.windfarmreactivepower}}</span>
|
|
||||||
<span>kvar</span>
|
|
||||||
</div>
|
|
||||||
<div class="small-title">实时无功</div>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="4" :sm="4" :md="4" :lg="4">
|
|
||||||
<div class="small-base">
|
|
||||||
|
|
||||||
<div class="small-value">
|
|
||||||
<span class="content-number">{{realData.attributeMap.windfarmdayprodenergy}}</span>
|
|
||||||
<span>万kWh</span>
|
|
||||||
</div>
|
|
||||||
<div class="small-title">日发电量</div>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="4" :sm="4" :md="4" :lg="4">
|
|
||||||
<div class="small-base">
|
|
||||||
|
|
||||||
<div class="small-value">
|
|
||||||
<span class="content-number">{{realData.attributeMap.windfarmmonthprodenergy}}</span>
|
|
||||||
<span>万kWh</span>
|
|
||||||
</div>
|
|
||||||
<div class="small-title">本月发电量</div>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="4" :sm="4" :md="4" :lg="4">
|
|
||||||
<div class="small-base" style="border: none;">
|
|
||||||
|
|
||||||
<div class="small-value">
|
|
||||||
<span class="content-number">{{realData.attributeMap.windfarmyearprodenergy}}</span>
|
|
||||||
<span>万kWh</span>
|
|
||||||
</div>
|
|
||||||
<div class="small-title">年发电量</div>
|
|
||||||
</div>
|
|
||||||
</el-col>-->
|
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :xs="24" :sm="24" :md="24" :lg="8">
|
<el-col :xs="24" :sm="24" :md="24" :lg="8">
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -1,130 +1,139 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="fanlist-pic">
|
<div class="fanlist-pic">
|
||||||
<div class="mask">
|
<div class="mask">
|
||||||
<div class="heart"><img :src="getImagePath(item, 'heart')" alt="" /></div>
|
<div class="heart"><img :src="getSafeImagePath(item, 'heart')" alt="" /></div>
|
||||||
<div class="leafs" :style="getAnimationStyle(item)">
|
<div class="leafs" :style="getAnimationStyle(item)">
|
||||||
<div class="leaf_1"><img :src="getImagePath(item, 'leaf')" alt="" /></div>
|
<div class="leaf_1"><img :src="getSafeImagePath(item, 'leaf')" alt="" /></div>
|
||||||
<div class="leaf_2"><img :src="getImagePath(item, 'leaf')" alt="" /></div>
|
<div class="leaf_2"><img :src="getSafeImagePath(item, 'leaf')" alt="" /></div>
|
||||||
<div class="leaf_3"><img :src="getImagePath(item, 'leaf')" alt="" /></div>
|
<div class="leaf_3"><img :src="getSafeImagePath(item, 'leaf')" alt="" /></div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="heart"><img src="~assets/dashboard/fan/heart13.png" alt="" /></div>
|
|
||||||
<div class="leafs" :style="getAnimationStyle(item)">
|
|
||||||
<div class="leaf_1"><img src="~assets/dashboard/fan/leaf13.png" alt="" /></div>
|
|
||||||
<div class="leaf_2"><img src="~assets/dashboard/fan/leaf13.png" alt="" /></div>
|
|
||||||
<div class="leaf_3"><img src="~assets/dashboard/fan/leaf13.png" alt="" /></div>
|
|
||||||
</div>-->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="fanlist-pic">
|
<div class="fanlist-pic">
|
||||||
<img :src="getImagePath(item, 'fan')" alt="" />
|
<img :src="getSafeImagePath(item, 'fan')" alt="" />
|
||||||
<!-- <img src="~assets/dashboard/fan/fan13.png" alt="" />-->
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineProps } from "vue";
|
import { defineProps } from "vue";
|
||||||
|
import { ref } from "vue";
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
item: {
|
item: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: () => {},
|
default: () => {},
|
||||||
},
|
},
|
||||||
})
|
});
|
||||||
|
|
||||||
const getAnimationStyle = (item) => {
|
const getAnimationStyle = (item) => {
|
||||||
const irotorspeed = item.attributeMap?.irotorspeed ?? 0
|
const irotorspeed = item.attributeMap?.irotorspeed ?? 0;
|
||||||
let animationDuration;
|
let animationDuration = 60 / irotorspeed / 3;
|
||||||
animationDuration = 60 / irotorspeed / 3
|
const processedoperationmode = item.attributeMap?.processedoperationmode ?? 0;
|
||||||
const processedoperationmode = item.attributeMap?.processedoperationmode ?? 0
|
|
||||||
if(processedoperationmode==33){
|
if (processedoperationmode === 33) {
|
||||||
return {
|
return {
|
||||||
'animation-duration': `0s`,
|
'animation-duration': `0s`,
|
||||||
'animation-timing-function': 'linear',
|
'animation-timing-function': 'linear',
|
||||||
'animation-iteration-count': 'infinite',
|
'animation-iteration-count': 'infinite',
|
||||||
'animation-direction': 'normaL',
|
'animation-direction': 'normal',
|
||||||
}
|
};
|
||||||
} else {
|
} else {
|
||||||
return {
|
return {
|
||||||
'animation-duration': `${animationDuration}s`,
|
'animation-duration': `${animationDuration}s`,
|
||||||
'animation-timing-function': 'linear',
|
'animation-timing-function': 'linear',
|
||||||
'animation-iteration-count': 'infinite',
|
'animation-iteration-count': 'infinite',
|
||||||
'animation-direction': 'normaL',
|
'animation-direction': 'normal',
|
||||||
|
};
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
const imagePathMap = {
|
const imagePathMap = {
|
||||||
'#9C27B0': {
|
'#9C27B0': {
|
||||||
heart: 'src/assets/dashboard/fan/heart1.png',
|
heart: 'heart1.png',
|
||||||
leaf: 'src/assets/dashboard/fan/leaf1.png',
|
leaf: 'leaf1.png',
|
||||||
fan: 'src/assets/dashboard/fan/fan1.png',
|
fan: 'fan1.png',
|
||||||
},
|
},
|
||||||
'#673AB7': {
|
'#673AB7': {
|
||||||
heart: 'src/assets/dashboard/fan/heart2.png',
|
heart: 'heart2.png',
|
||||||
leaf: 'src/assets/dashboard/fan/leaf2.png',
|
leaf: 'leaf2.png',
|
||||||
fan: 'src/assets/dashboard/fan/fan2.png',
|
fan: 'fan2.png',
|
||||||
},
|
},
|
||||||
'#3F51B5': {
|
'#3F51B5': {
|
||||||
heart: 'src/assets/dashboard/fan/heart3.png',
|
heart: 'heart3.png',
|
||||||
leaf: 'src/assets/dashboard/fan/leaf3.png',
|
leaf: 'leaf3.png',
|
||||||
fan: 'src/assets/dashboard/fan/fan3.png',
|
fan: 'fan3.png',
|
||||||
},
|
},
|
||||||
'#3059EC': {
|
'#3059EC': {
|
||||||
heart: 'src/assets/dashboard/fan/heart4.png',
|
heart: 'heart4.png',
|
||||||
leaf: 'src/assets/dashboard/fan/leaf4.png',
|
leaf: 'leaf4.png',
|
||||||
fan: 'src/assets/dashboard/fan/fan4.png',
|
fan: 'fan4.png',
|
||||||
},
|
},
|
||||||
'#0277B3': {
|
'#0277B3': {
|
||||||
heart: 'src/assets/dashboard/fan/heart5.png',
|
heart: 'heart5.png',
|
||||||
leaf: 'src/assets/dashboard/fan/leaf5.png',
|
leaf: 'leaf5.png',
|
||||||
fan: 'src/assets/dashboard/fan/fan5.png',
|
fan: 'fan5.png',
|
||||||
},
|
},
|
||||||
'#00A096': {
|
'#00A096': {
|
||||||
heart: 'src/assets/dashboard/fan/heart6.png',
|
heart: 'heart6.png',
|
||||||
leaf: 'src/assets/dashboard/fan/leaf6.png',
|
leaf: 'leaf6.png',
|
||||||
fan: 'src/assets/dashboard/fan/fan6.png',
|
fan: 'fan6.png',
|
||||||
},
|
},
|
||||||
'#06B429': {
|
'#06B429': {
|
||||||
heart: 'src/assets/dashboard/fan/heart7.png',
|
heart: 'heart7.png',
|
||||||
leaf: 'src/assets/dashboard/fan/leaf7.png',
|
leaf: 'leaf7.png',
|
||||||
fan: 'src/assets/dashboard/fan/fan7.png',
|
fan: 'fan7.png',
|
||||||
},
|
},
|
||||||
'#64DD17': {
|
'#64DD17': {
|
||||||
heart: 'src/assets/dashboard/fan/heart8.png',
|
heart: 'heart8.png',
|
||||||
leaf: 'src/assets/dashboard/fan/leaf8.png',
|
leaf: 'leaf8.png',
|
||||||
fan: 'src/assets/dashboard/fan/fan8.png',
|
fan: 'fan8.png',
|
||||||
},
|
},
|
||||||
'#EEFF41': {
|
'#EEFF41': {
|
||||||
heart: 'src/assets/dashboard/fan/heart9.png',
|
heart: 'heart9.png',
|
||||||
leaf: 'src/assets/dashboard/fan/leaf9.png',
|
leaf: 'leaf9.png',
|
||||||
fan: 'src/assets/dashboard/fan/fan9.png',
|
fan: 'fan9.png',
|
||||||
},
|
},
|
||||||
'#FFB600': {
|
'#FFB600': {
|
||||||
heart: 'src/assets/dashboard/fan/heart10.png',
|
heart: 'heart10.png',
|
||||||
leaf: 'src/assets/dashboard/fan/leaf10.png',
|
leaf: 'leaf10.png',
|
||||||
fan: 'src/assets/dashboard/fan/fan10.png',
|
fan: 'fan10.png',
|
||||||
},
|
},
|
||||||
'#FF7E00': {
|
'#FF7E00': {
|
||||||
heart: 'src/assets/dashboard/fan/heart11.png',
|
heart: 'heart11.png',
|
||||||
leaf: 'src/assets/dashboard/fan/leaf11.png',
|
leaf: 'leaf11.png',
|
||||||
fan: 'src/assets/dashboard/fan/fan11.png',
|
fan: 'fan11.png',
|
||||||
},
|
},
|
||||||
'#FE3731': {
|
'#FE3731': {
|
||||||
heart: 'src/assets/dashboard/fan/heart12.png',
|
heart: 'heart12.png',
|
||||||
leaf: 'src/assets/dashboard/fan/leaf12.png',
|
leaf: 'leaf12.png',
|
||||||
fan: 'src/assets/dashboard/fan/fan12.png',
|
fan: 'fan12.png',
|
||||||
},
|
},
|
||||||
'#999999': {
|
'#999999': {
|
||||||
heart: 'src/assets/dashboard/fan/heart13.png',
|
heart: 'heart13.png',
|
||||||
leaf: 'src/assets/dashboard/fan/leaf13.png',
|
leaf: 'leaf13.png',
|
||||||
fan: 'src/assets/dashboard/fan/fan13.png',
|
fan: 'fan13.png',
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const getImagePath = (item, type) => {
|
const getImagePath = (item, type) => {
|
||||||
const color=item.attributeMap.color
|
const color = item.attributeMap.color;
|
||||||
return imagePathMap[color]?.[type];
|
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>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
@ -250,26 +259,19 @@ const getImagePath = (item, type) => {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
top: 5px;
|
top: 5px;
|
||||||
left: 17px;
|
left: 17px;
|
||||||
/* z-index: 3;*/
|
|
||||||
}
|
}
|
||||||
.leafs {
|
.leafs {
|
||||||
/* z-index: 1;*/
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
/* animation: leafRotate 1s infinite linear;*/
|
|
||||||
transform-origin: center center;
|
transform-origin: center center;
|
||||||
width: 46px;
|
width: 46px;
|
||||||
height: 46px;
|
height: 46px;
|
||||||
/*animation-duration: 1s;*/
|
|
||||||
animation-name: leafRotate;
|
animation-name: leafRotate;
|
||||||
/*animation-iteration-count: infinite;
|
|
||||||
animation-timing-function: linear;*/
|
|
||||||
.leaf_1 {
|
.leaf_1 {
|
||||||
width: 9px;
|
width: 9px;
|
||||||
height: 19px;
|
height: 19px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 17px;
|
left: 17px;
|
||||||
top: -1px;
|
top: -1px;
|
||||||
/* transform-origin: left top;*/
|
|
||||||
}
|
}
|
||||||
.leaf_2 {
|
.leaf_2 {
|
||||||
width: 9px;
|
width: 9px;
|
||||||
@ -277,7 +279,6 @@ const getImagePath = (item, type) => {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
left: 31px;
|
left: 31px;
|
||||||
top: 20px;
|
top: 20px;
|
||||||
/* transform-origin: left top;*/
|
|
||||||
transform: rotate(120deg);
|
transform: rotate(120deg);
|
||||||
}
|
}
|
||||||
.leaf_3 {
|
.leaf_3 {
|
||||||
@ -286,7 +287,6 @@ const getImagePath = (item, type) => {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
left: 5px;
|
left: 5px;
|
||||||
top: 22px;
|
top: 22px;
|
||||||
/*transform-origin: left top;*/
|
|
||||||
transform: rotate(240deg);
|
transform: rotate(240deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -322,7 +322,6 @@ const getImagePath = (item, type) => {
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 80px;
|
width: 80px;
|
||||||
/* height: 80px;*/
|
|
||||||
.el-button {
|
.el-button {
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
}
|
}
|
||||||
|
|||||||
518
ui/dasadmin/src/views/backend/home/windMatrixpage.vue
Normal file
518
ui/dasadmin/src/views/backend/home/windMatrixpage.vue
Normal file
@ -0,0 +1,518 @@
|
|||||||
|
<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"
|
||||||
|
@click="handleClick(item)"
|
||||||
|
@contextmenu.prevent="windContextMenu($event,item)"
|
||||||
|
>
|
||||||
|
<div class="FanList-panel wind-default" :class="{
|
||||||
|
'': item.standard==1,
|
||||||
|
'': item.standard==0,
|
||||||
|
'wind-offline': item.attributeMap.processedoperationmode == 33
|
||||||
|
}">
|
||||||
|
|
||||||
|
<div class="fanlist-top">
|
||||||
|
<span :class="item.standard == 1 ? 'wind-mark-icon' : 'fanlist-icon'">
|
||||||
|
<img :class="item.standard == 1 ? '' : 'wind-picture'" src="~assets/dashboard/biaogan.png" alt="" />
|
||||||
|
</span>
|
||||||
|
<span class="fanlist-name"> {{ item.name }}</span>
|
||||||
|
<el-tag v-if="item.attributeMap.processedoperationmode === 20" class="tag-panel" :style="getStyles(item.attributeMap.color)" type="primary">并网</el-tag>
|
||||||
|
<el-tag v-if="item.attributeMap.processedoperationmode === 11" class="tag-panel" :style="getStyles(item.attributeMap.color)" type="primary">待机</el-tag>
|
||||||
|
<el-tag v-if="item.attributeMap.processedoperationmode === 16" class="tag-panel" :style="getStyles(item.attributeMap.color)" type="primary">启动</el-tag>
|
||||||
|
<el-tag v-if="item.attributeMap.processedoperationmode === 10" class="tag-panel" :style="getStyles(item.attributeMap.color)" type="primary"
|
||||||
|
>维护</el-tag>
|
||||||
|
<el-tag v-if="item.attributeMap.processedoperationmode === 0" class="tag-panel" :style="getStyles(item.attributeMap.color)" type="primary">离线</el-tag>
|
||||||
|
<el-tag v-if="item.attributeMap.processedoperationmode === 8" class="tag-panel" :style="getStyles(item.attributeMap.color)" type="primary">限功率运行</el-tag>
|
||||||
|
<el-tag v-if="item.attributeMap.processedoperationmode === 6" class="tag-panel" :style="getStyles(item.attributeMap.color)" type="primary">正常停机</el-tag>
|
||||||
|
<el-tag v-if="item.attributeMap.processedoperationmode === 1" class="tag-panel" :style="getStyles(item.attributeMap.color)" type="primary"
|
||||||
|
>外部因素导致停机</el-tag>
|
||||||
|
<el-tag v-if="item.attributeMap.processedoperationmode === 2" class="tag-panel" :style="getStyles(item.attributeMap.color)" type="primary">停机</el-tag>
|
||||||
|
<el-tag v-if="item.attributeMap.processedoperationmode === 1110" class="tag-panel" :style="getStyles(item.attributeMap.color)" type="primary">解缆状态</el-tag>
|
||||||
|
<el-tag v-if="item.attributeMap.processedoperationmode === 1111" class="tag-panel" :style="getStyles(item.attributeMap.color)" type="primary"
|
||||||
|
>电网故障停机</el-tag>
|
||||||
|
<el-tag v-if="item.attributeMap.processedoperationmode === 1112" class="tag-panel" :style="getStyles(item.attributeMap.color)" type="primary"
|
||||||
|
>安全链停机</el-tag>
|
||||||
|
<el-tag v-if="item.attributeMap.processedoperationmode === 33" class="tag-panel" :style="getStyles(item.attributeMap.color)" type="primary"
|
||||||
|
>通讯中断</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>
|
||||||
|
</div>
|
||||||
|
<div class="fanlist-bottom">
|
||||||
|
<!-- <el-tag class="tag-panel is-danger">已锁定</el-tag>-->
|
||||||
|
<el-tag v-if="item.attributeMap.locked === 1" class="tag-panel is-danger">已锁定</el-tag>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<ContextMenu :pos="contextMenuPos" v-model:visible="OperateVisible">
|
||||||
|
<template #default>
|
||||||
|
<div class="modelOperate">
|
||||||
|
<el-button
|
||||||
|
class="control-btn"
|
||||||
|
type="primary"
|
||||||
|
@click="sendCommand('setTurbineFastStart')"
|
||||||
|
v-if="realTimeData.processedoperationmode !== 16"
|
||||||
|
>启动</el-button>
|
||||||
|
<el-button @click="sendCommand('setTurbineStop')" v-else class="control-btn" type="primary">停机</el-button>
|
||||||
|
<el-button @click="sendCommand('setTurbineResetStatusCode')" class="control-btn" type="primary">复位</el-button>
|
||||||
|
<el-button
|
||||||
|
@click="sendManualCommand(1)"
|
||||||
|
v-if="realTimeData.locked !== 1"
|
||||||
|
class="control-btn"
|
||||||
|
type="primary">锁定</el-button>
|
||||||
|
<el-button @click="sendManualCommand(0)" v-else class="control-btn" type="primary">解锁</el-button>
|
||||||
|
<el-button
|
||||||
|
class="control-btn"
|
||||||
|
type="primary"
|
||||||
|
@click="editstandard(1)"
|
||||||
|
v-if="realTimeData.standard == 0"
|
||||||
|
>标杆设置</el-button>
|
||||||
|
<el-button
|
||||||
|
class="control-btn"
|
||||||
|
type="primary"
|
||||||
|
@click="editstandard(0)"
|
||||||
|
v-else
|
||||||
|
>标杆取消</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</ContextMenu>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {defineProps, ref} from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import { adminBaseRoutePath } from '/@/router/static/adminBase'
|
||||||
|
import ContextMenu from '/@/views/backend/auth/model/contextMenu.vue'
|
||||||
|
import { sendCommandReq, sendManualCommandReq } from '/@/api/backend/control/request'
|
||||||
|
import {ElMessage, ElMessageBox} from "element-plus";
|
||||||
|
import {equipUpdate} from '/@/api/backend/index.ts'
|
||||||
|
import WindContentleft from './windMatrixleft.vue'
|
||||||
|
import WindContentright from './windMatrixright.vue'
|
||||||
|
import WindContentcenter from './windMatrixcenter.vue'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const props = defineProps({
|
||||||
|
parentData: {
|
||||||
|
type: Array,
|
||||||
|
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', {
|
||||||
|
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,
|
||||||
|
deviceCode: row.deviceCode,
|
||||||
|
name: row.name,
|
||||||
|
model: row.model,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const OperateVisible = ref(false)
|
||||||
|
const contextMenuPos = ref({
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
})
|
||||||
|
const realTimeData = ref<any>({
|
||||||
|
processedoperationmode: 1111,
|
||||||
|
locked: 0,
|
||||||
|
deviceId: '',
|
||||||
|
name:'',
|
||||||
|
code:'',
|
||||||
|
standard:'',
|
||||||
|
iotModelId:''
|
||||||
|
})
|
||||||
|
const windContextMenu = (event: any,curnodeData) => {
|
||||||
|
contextMenuPos.value.x = event.pageX
|
||||||
|
contextMenuPos.value.y = event.pageY
|
||||||
|
realTimeData.value.processedoperationmode=curnodeData.attributeMap.processedoperationmode
|
||||||
|
realTimeData.value.locked=curnodeData.attributeMap.locked
|
||||||
|
realTimeData.value.deviceId=curnodeData.irn
|
||||||
|
realTimeData.value.name=curnodeData.name
|
||||||
|
realTimeData.value.code=curnodeData.deviceCode
|
||||||
|
realTimeData.value.standard=curnodeData.standard
|
||||||
|
realTimeData.value.iotModelId=curnodeData.modelId
|
||||||
|
OperateVisible.value = true
|
||||||
|
}
|
||||||
|
const sendCommand = (type: 'setTurbineFastStart' | 'setTurbineStop' | 'setTurbineResetStatusCode') => {
|
||||||
|
const sendTypeEnum = {
|
||||||
|
setTurbineFastStart: '风机快速启动指令',
|
||||||
|
setTurbineStop: '风机停机指令',
|
||||||
|
setTurbineResetStatusCode: '风机复位故障代码指令',
|
||||||
|
}
|
||||||
|
ElMessageBox.confirm('确认发送' + sendTypeEnum[type] + '吗？', '', {
|
||||||
|
confirmButtonText: '确认',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning',
|
||||||
|
}).then(() => {
|
||||||
|
const serviceName = sendTypeEnum[type]
|
||||||
|
const optDesc = serviceName + ',设定值为：1'
|
||||||
|
sendCommandReq({
|
||||||
|
deviceId: realTimeData.value.deviceId as string,
|
||||||
|
serviceCode: type,
|
||||||
|
serviceName,
|
||||||
|
optDesc,
|
||||||
|
opValue: 1,
|
||||||
|
}).then((res) => {
|
||||||
|
if (res.code == 200) {
|
||||||
|
ElMessage.success('指令发送成功')
|
||||||
|
} else {
|
||||||
|
ElMessage.error('指令发送失败')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const sendManualCommand = (type: 1 | 0) => {
|
||||||
|
const serviceName = type === 0 ? '风机解锁' : '风机锁定'
|
||||||
|
ElMessageBox.confirm('确认' + serviceName + '吗？', '', {
|
||||||
|
confirmButtonText: '确认',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning',
|
||||||
|
}).then(() => {
|
||||||
|
sendManualCommandReq({
|
||||||
|
deviceId: realTimeData.value.deviceId as string,
|
||||||
|
serviceCode: 'Locked',
|
||||||
|
serviceName,
|
||||||
|
optDesc: serviceName + ',设定值为：' + type,
|
||||||
|
opValue: type,
|
||||||
|
}).then((res) => {
|
||||||
|
if (res.code == 200) {
|
||||||
|
ElMessage.success('指令发送成功')
|
||||||
|
} else {
|
||||||
|
ElMessage.error('指令发送失败')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const editstandard = (type: 1 | 0) => {
|
||||||
|
const standardName = type === 0 ? '取消风机标杆' : '设置风机标杆'
|
||||||
|
ElMessageBox.confirm('确认' + standardName + '吗？', '', {
|
||||||
|
confirmButtonText: '确认',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning',
|
||||||
|
}).then(() => {
|
||||||
|
equipUpdate({
|
||||||
|
id: realTimeData.value.deviceId,
|
||||||
|
code: realTimeData.value.code,
|
||||||
|
name:realTimeData.value.name,
|
||||||
|
iotModelId: realTimeData.value.iotModelId,
|
||||||
|
standard: type
|
||||||
|
}).then((res) => {
|
||||||
|
if (res.code == 200) {
|
||||||
|
ElMessage.success('设置成功')
|
||||||
|
} else {
|
||||||
|
ElMessage.error('设置失败')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const getStyles=(color) =>{
|
||||||
|
if (color && /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(color)) {
|
||||||
|
const rgbaColor = hexToRgba(color, 0.2);
|
||||||
|
return {
|
||||||
|
background: rgbaColor,
|
||||||
|
border: `1px solid ${rgbaColor}`,
|
||||||
|
color: color,
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
background: 'rgba(48, 89, 236, 0.2)',
|
||||||
|
border: '1px solid #3059ec',
|
||||||
|
color: '#3059ec'
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const hexToRgba = (hex, alpha) => {
|
||||||
|
hex = hex.replace('#', '');
|
||||||
|
let r, g, b;
|
||||||
|
if (hex.length === 3) {
|
||||||
|
r = parseInt(hex[0] + hex[0], 16);
|
||||||
|
g = parseInt(hex[1] + hex[1], 16);
|
||||||
|
b = parseInt(hex[2] + hex[2], 16);
|
||||||
|
} else {
|
||||||
|
r = parseInt(hex.substring(0, 2), 16);
|
||||||
|
g = parseInt(hex.substring(2, 4), 16);
|
||||||
|
b = parseInt(hex.substring(4, 6), 16);
|
||||||
|
}
|
||||||
|
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
|
||||||
|
}
|
||||||
|
</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-offline {
|
||||||
|
background-image: linear-gradient(180deg, #dddddd 0%, #ffffff 93%);
|
||||||
|
border: 1px solid #eeeeee;
|
||||||
|
}
|
||||||
|
.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.2);
|
||||||
|
border: 1px solid #0277b3;
|
||||||
|
color: #0277b3;
|
||||||
|
}
|
||||||
|
.is-success {
|
||||||
|
background: rgba(6, 180, 41, 0.2);
|
||||||
|
border: 1px solid #06b429;
|
||||||
|
color: #06b429;
|
||||||
|
}
|
||||||
|
.is-info {
|
||||||
|
background: rgba(48, 89, 236, 0.2);
|
||||||
|
border: 1px solid #3059ec;
|
||||||
|
color: #3059ec;
|
||||||
|
}
|
||||||
|
.is-warning {
|
||||||
|
background: rgba(255, 126, 0, 0.2);
|
||||||
|
border: 1px solid #ff7e00;
|
||||||
|
color: #ff7e00;
|
||||||
|
}
|
||||||
|
.is-danger {
|
||||||
|
background: rgba(254, 55, 49, 0.2);
|
||||||
|
border: 1px solid #fe3731;
|
||||||
|
color: #fe3731;
|
||||||
|
}
|
||||||
|
.is-offline {
|
||||||
|
background: rgba(153, 153, 153, 0.2);
|
||||||
|
border: 1px solid #999999;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
.is-maintenance {
|
||||||
|
background: rgba(0, 160, 150, 0.2);
|
||||||
|
border: 1px solid #00a096;
|
||||||
|
color: #00a096;
|
||||||
|
}
|
||||||
|
.fanlist-main {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 5px 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: 5px;
|
||||||
|
width: 100%;
|
||||||
|
text-align: right;
|
||||||
|
.content-number {
|
||||||
|
color: #333333;
|
||||||
|
font-size: 20px;
|
||||||
|
padding-right: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.modelOperate{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
width: 80px;
|
||||||
|
/* height: 80px;*/
|
||||||
|
.el-button {
|
||||||
|
margin: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1680px) {
|
||||||
|
.FanList-content {
|
||||||
|
.FanList-panel {
|
||||||
|
.fanlist-text {
|
||||||
|
font-size: 12px !important;
|
||||||
|
.content-number {
|
||||||
|
font-size: 16px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1280px) {
|
||||||
|
.FanList-content {
|
||||||
|
.FanList-panel {
|
||||||
|
.fanlist-text {
|
||||||
|
margin-top: 10px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user