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-12-19 15:05:36 +08:00
parent afee8ce2a6
commit a6236f8ef9
6 changed files with 447 additions and 489 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
ui/dasadmin/src/assets/dashboard/bg3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
ui/dasadmin/src/assets/dashboard/fan/heart11.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 369 B

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

@ -296,7 +296,33 @@ const currentDayStatus = ref({
const deviceCode = ref([]) const deviceCode = ref([])
const FanList = ref([]) const FanList = ref([])
const StatusListData = () => { const StatusListData = () => {
getWindTurbineMatrixData().then((res) => { getWindTurbineMatrixData(
{
objectType: 10002,
belongProject: '',
attributesList: [
'iwindspeed"',
'iturbineoperationmode',
'iyplevel',
'gridlostdetected',
'ibplevel',
'igenpower',
'ikwhthisday',
'Locked',
'ProcessedOperationMode',
'iRotorSpeed',
'ActiveStatusCode01',
'ActiveStatusCode02',
'ActiveStatusCode03',
'ActiveStatusCode04',
'ActiveStatusCode05',
'ActiveStatusCode06',
'ActiveStatusCode07',
'ActiveStatusCode08',
'FirstTriggeredCode'
]
}
).then((res) => {
if (res.code == 200) { if (res.code == 200) {
currentDayStatus.value.windTurbineNum = res.data.length currentDayStatus.value.windTurbineNum = res.data.length
const data = res.data.map((item, index) => { const data = res.data.map((item, index) => {

435
ui/dasadmin/src/views/backend/home/home.vue
View File

@ -1,148 +1,40 @@
<template> <template>
<div class="default-main" ref="HomeHight"> <div class="default-main" ref="HomeHight">
<el-row style="margin: 0px;"> <el-row style="margin: 0px;">
<el-col :md="24" :lg="24" class="col-top">
<el-row class="overview">
<el-col :xs="24" :sm="24" :md="24" :lg="16">
<div class="overviewItem" style="margin-left: 0px;">
<img class="small-panel-pic" src="~assets/dashboard/overview07.png" alt="" />
<div class="smallBox" style="width: 14%;margin-left: -10px;">
<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>
</div>
<div class="smallBox">
<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>
</div>
<div class="smallBox">
<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>
</div>
<div class="smallBox">
<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>
</div>
<div class="smallBox">
<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>
</div>
<div class="smallBox">
<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>
</div>
</div>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="8">
<div class="overviewItem">
<el-col :xs="3" :sm="3" :md="3" :lg="3">
<img class="small-panel-pic" src="~assets/dashboard/overview08.png" alt="" />
</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.turbinecountpowerprod}}</span>
<span>台</span>
</div>
<div class="small-title">并网台数</div>
</div>
</el-col>
<el-col :xs="6" :sm="6" :md="6" :lg="6">
<div class="small-base">
<div class="small-value">
<span class="content-number">{{realData.attributeMap.turbinecountidle}}</span>
<span>台</span>
</div>
<div class="small-title">待机台数</div>
</div>
</el-col>
<el-col :xs="6" :sm="6" :md="6" :lg="6">
<div class="small-base">
<div class="small-value">
<span class="content-number">{{realData.attributeMap.turbinecountdisconnected}}</span>
<span>台</span>
</div>
<div class="small-title">断联台数</div>
</div>
</el-col>
<el-col :xs="6" :sm="5" :md="5" :lg="5">
<div class="small-base" style="border: none;">
<div class="small-value">
<span class="content-number">{{realData.attributeMap.turbinecountservice}}</span>
<span>台</span>
</div>
<div class="small-title">维护台数</div>
</div>
</el-col>
</div>
</el-col>
</el-row>
</el-col>
<el-col :md="24" :lg="24">
<div class="AlertPart">
<div class="AlertPic">
<img src="~assets/dashboard/alert01.png" alt="">
</div>
<div class="realAlert"
ref="scrollRef"
@mouseover.native="clearScroll"
@mouseleave.native="createScroll"
>
<p v-for="(item,index) in tableData"
:key="index"
@mouseover="showButton"
@mouseout="hideButton"
>
<span>{{item.eventTimeFormate}}</span>
<span>{{item.deviceName}}</span>
<span>{{item.eventText}}</span>
<span v-show="showConfirmButton" >
<a style="color: #0277b3; cursor: pointer;" @click="open(item)" >确认</a>
</span>
</p>
</div>
</div>
</el-col>
<el-col :md="24" :lg="24" class="col-center" style="padding-right: 10px;"> <el-col :md="24" :lg="24" class="col-center" style="padding-right: 10px;">
<div class="grid-content ep-bg-purple-light"> <div class="grid-content ep-bg-purple-light">
<!--风机矩阵--> <!--风机矩阵-->
<div class="matrix panelBg"> <div class="matrix panelBg">
<div class="homeHeader"> <div class="homeHeader">
<div class="cardLabel">风机矩阵</div> <div class="cardLabel">风机矩阵</div>
<div class="cardBtn">
<el-radio-group v-model="overviewSlotData">
<el-radio value=" ">全部</el-radio>
<el-radio value="一期">一期</el-radio>
<el-radio value="二期">二期</el-radio>
</el-radio-group>
</div>
<div class="headerRight">
<el-row>
<el-col>
<div class="overviewItem">
<div class="small-base">平均风速:<span>{{ realData.attributeMap.windfarmavgwindspeed}}m/s</span></div>
<div class="small-base">实时有功:<span>{{ realData.attributeMap.windfarmactivepower}}kW</span></div>
<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>
<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>
</el-col>
</el-row>
</div>
</div> </div>
<el-scrollbar> <el-scrollbar>
@ -159,20 +51,24 @@
import { onMounted, reactive, ref, onUnmounted } from 'vue' import { onMounted, reactive, ref, onUnmounted } from 'vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import WindContent from '/@/views/backend/home/windMatrixpage.vue' import WindContent from '/@/views/backend/home/windMatrixpage.vue'
import { equipList } from '/@/api/backend/realData/request' import { getWindFarmRealData, getWindTurbineMatrixData } from '/@/api/backend/dashboard.ts'
import { getWindFarmRealData, getWindTurbineMatrixData, getHistoryData } from '/@/api/backend/dashboard.ts'
import { dayjs, ElMessage, ElMessageBox, TableInstance } from 'element-plus' import { dayjs, ElMessage, ElMessageBox, TableInstance } from 'element-plus'
import { getRealTimeState } from '/@/views/backend/equipment/airBlower/utils.ts' import { getRealTimeState,malFunctionKeys } from '/@/views/backend/equipment/airBlower/utils.ts'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
import { getAlarmListReq, eventComfirm } from '/@/api/backend/alarms/request'
import { getParamList } from '/@/api/backend/SystemParam/request' import { getParamList } from '/@/api/backend/SystemParam/request'
const route = useRoute() import { queryfaultCodeDict } from '/@/api/backend/theoreticalpowerCurve/request'
import { useEnumStore } from '/@/stores/enums'
const route = useRoute()
const enumStore = useEnumStore()
const d = new Date() const d = new Date()
const { t } = useI18n() const { t } = useI18n()
let timer: any = null let timer: any = null
let myTable = ref<TableInstance>() let myTable = ref<TableInstance>()
const overviewSlotData= ref('一期')
const realData = ref({ const realData = ref({
windFarmId: '', windFarmId: '',
attributeMap: {}, attributeMap: {},
@ -189,8 +85,8 @@ const attributeList = ref({
'turbinecountpowerprod', 'turbinecountpowerprod',
'turbinecountidle', 'turbinecountidle',
'turbinecountdisconnected', 'turbinecountdisconnected',
'turbinecountservice' 'turbinecountservice',
'turbinecountfaulted'
] ]
}) })
@ -236,6 +132,12 @@ const overviewList = () => {
? res.data.attributeMap.turbinecountservice ? res.data.attributeMap.turbinecountservice
: res.data.attributeMap.turbinecountservice.toFixed(0) : res.data.attributeMap.turbinecountservice.toFixed(0)
: '0' : '0'
res.data.attributeMap.turbinecountfaulted =
res.data.attributeMap.turbinecountfaulted !== undefined
? res.data.attributeMap.turbinecountfaulted % 1 === 0
? res.data.attributeMap.turbinecountfaulted
: res.data.attributeMap.turbinecountfaulted.toFixed(0)
: '0'
const data: any = { const data: any = {
windFarmId: res.data.windFarmId, windFarmId: res.data.windFarmId,
attributeMap: { attributeMap: {
@ -248,7 +150,8 @@ const overviewList = () => {
turbinecountpowerprod: res.data.attributeMap.turbinecountpowerprod, turbinecountpowerprod: res.data.attributeMap.turbinecountpowerprod,
turbinecountidle: res.data.attributeMap.turbinecountidle, turbinecountidle: res.data.attributeMap.turbinecountidle,
turbinecountdisconnected: res.data.attributeMap.turbinecountdisconnected, turbinecountdisconnected: res.data.attributeMap.turbinecountdisconnected,
turbinecountservice: res.data.attributeMap.turbinecountservice turbinecountservice: res.data.attributeMap.turbinecountservice,
turbinecountfaulted: res.data.attributeMap.turbinecountfaulted,
}, },
} }
@ -293,15 +196,47 @@ const currentDayStatus = ref({
StartCapacityTotal: 0, StartCapacityTotal: 0,
StarteNum: 0, StarteNum: 0,
}) })
const deviceCode = ref([]) const deviceCode = ref([])
const FanList = ref([]) const FanList = ref([])
const StatusListData = () => { const StatusListData = () => {
getWindTurbineMatrixData().then((res) => { getWindTurbineMatrixData(
{
objectType: 10002,
belongProject: '',
attributesList: [
'iwindspeed"',
'iturbineoperationmode',
'iyplevel',
'gridlostdetected',
'ibplevel',
'igenpower',
'ikwhthisday',
'Locked',
'ProcessedOperationMode',
'iRotorSpeed',
'ActiveStatusCode01',
'ActiveStatusCode02',
'ActiveStatusCode03',
'ActiveStatusCode04',
'ActiveStatusCode05',
'ActiveStatusCode06',
'ActiveStatusCode07',
'ActiveStatusCode08',
'FirstTriggeredCode'
]
}
).then((res) => {
if (res.code == 200) { if (res.code == 200) {
currentDayStatus.value.windTurbineNum = res.data.length currentDayStatus.value.windTurbineNum = res.data.length
const data = res.data.map((item, index) => { const data = res.data.map((item, index) => {
let color:any='' let color:any=''
const state = getRealTimeState(item.attributeMap) const state = getRealTimeState(item.attributeMap)
let firsttriggeredcode=item.attributeMap.firsttriggeredcode
/* if (enumStore.keys.includes('FirstTriggeredCode')) {
firsttriggeredcode = enumStore.data['FirstTriggeredCode'][firsttriggeredcode]
}*/
paramColorData.value.forEach((item, index) => { paramColorData.value.forEach((item, index) => {
if (item.state == state) { if (item.state == state) {
color = item.color color = item.color
@ -403,6 +338,7 @@ const StatusListData = () => {
color:color, color:color,
locked: item.attributeMap.locked, locked: item.attributeMap.locked,
irotorspeed: item.attributeMap.irotorspeed, irotorspeed: item.attributeMap.irotorspeed,
firsttriggeredcode:item.attributeMap.firsttriggeredcode,
}, },
} }
}) })
@ -416,101 +352,6 @@ const StatusListData = () => {
}) })
} }
const timestampToTime = (timestamp: any) => {
timestamp = timestamp ? timestamp : null
let date = new Date(timestamp)
let Y = date.getFullYear() + '-'
let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
let m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
return Y + M + D + h + m
}
const tableData = ref()
const getTableData = (deviceCode) => {
const data: any = {
startTime: new Date(new Date().toLocaleDateString()).getTime(),
endTime: Date.now(),
deviceCode: deviceCode,
eventLevel:2 || 1
}
// console.log(JSON.stringify(data))
getAlarmListReq(data).then((res) => {
if (res.code == 200) {
//tableData.value = res.rows
tableData.value = res.rows.map((item: any) => {
return {
...item,
eventTimeFormate: timestampToTime(item.eventTime),
}
})
} else {
ElMessage.error(res.msg ?? '查询失败')
}
})
}
const open = (val: any) => {
ElMessageBox.confirm('是否确认?', '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
okSubmit(val)
})
.catch(() => {
ElMessage({
type: 'info',
message: '取消确认',
})
})
}
const okSubmit = (val: any) => {
const reqData: any = [
{
eventTime: val.eventTime,
eventId: val.eventId,
confirmed: 1,
deviceId: val.deviceId,
},
]
eventComfirm(reqData)
.then((res: any) => {
if (res.code == 200) {
ElMessage.success(res.msg ?? '确认成功')
getTableData(deviceCode.value)
} else {
ElMessage.error(res.msg ?? '查询失败')
}
})
.catch((err) => {
ElMessage.error(err?.response?.data?.msg ?? '查询失败')
})
}
const scrollRef=ref()
const showConfirmButton = ref(false)
const showButton = () => {
showConfirmButton.value = true;
}
const hideButton = () => {
showConfirmButton.value = false;
}
const clearScroll = () => {
clearInterval(timer)
}
const createScroll = () => {
clearScroll()
timer =setInterval(() => {
scrollRef.value.scrollLeft += 1;
if (scrollRef.value.clientWidth + scrollRef.value.scrollLeft == scrollRef.value.scrollWidth) {
scrollRef.value.scrollLeft = 0
}
}, 30);
}
let autoUpdateForSecondTimer: any = null let autoUpdateForSecondTimer: any = null
@ -532,7 +373,7 @@ const computedHeight = reactive({
const sizeChange = () => { const sizeChange = () => {
const rect = HomeHight.value?.getBoundingClientRect() const rect = HomeHight.value?.getBoundingClientRect()
if (!rect) return if (!rect) return
computedHeight.centerHeight = rect.height - 190 + 'px' computedHeight.centerHeight = rect.height - 0 + 'px'
if (window.screen.width < 1360) { if (window.screen.width < 1360) {
computedHeight.centerHeight = rect.height - 0 + 'px' computedHeight.centerHeight = rect.height - 0 + 'px'
} }
@ -546,18 +387,9 @@ onMounted(() => {
window.addEventListener('resize', sizeChange) window.addEventListener('resize', sizeChange)
sizeChange() sizeChange()
//getAllChartData() //getAllChartData()
createScroll()
overviewList() overviewList()
StatusListData() StatusListData()
autoUpdate() autoUpdate()
equipList({ objectType: 10002 }).then((res) => {
res.data.map((item: any) => {
deviceCode.value.push(item.code)
})
getTableData(deviceCode.value)
})
}) })
onUnmounted(() => { onUnmounted(() => {
@ -615,70 +447,6 @@ $labelHeight: 30px;
margin-bottom: 10px; margin-bottom: 10px;
display: block; display: block;
} }
.overview {
width: calc(100% - 5px);
height: 100%;
.overviewItem{
height: 100px;
display: flex;
background: #FFFFFF;
border-radius: 6px;
margin: 5px;
align-items: center;
color: #4E5969;
justify-content: space-between;
.small-panel-pic{
width: 80px;
height: 80px;
}
.small-base{
text-align: center;
border-right: 1px #eeeeee solid;
}
.smallBox{
width: 18%;
.small-base{
text-align: center;
border-right: 1px #eeeeee solid;
}
}
}
}
.AlertPart{
width: calc(100% - 10px);
height: 60px;
margin: 10px 0;
background-image: linear-gradient(90deg, #FFE3E3 0%, #FBFDFF 100%);
border: 2px solid #FFFFFF;
border-radius: 6px;
display: flex;
align-items: center;
.AlertPic{
width: 50px;
text-align: center;
img{
width: 24px;
height: 24px;
}
}
.realAlert{
overflow: hidden;
white-space: nowrap;
cursor: pointer;
font-size: 20px;
color: #333333;
width: 100%;
p{
padding-right: 30px;
display: inline-block;
span{
padding-right: 10px;
}
}
}
}
.grid-content { .grid-content {
/* overflow-x: hidden;*/ /* overflow-x: hidden;*/
width: 100%; width: 100%;
@ -693,9 +461,8 @@ $labelHeight: 30px;
.matrix { .matrix {
@include cardlabel; @include cardlabel;
background: url('/@/assets/dashboard/bg2.png') no-repeat #ffffff; background: url('/@/assets/dashboard/bg3.png') no-repeat #ffffff;
background-size: 100% 100%; background-size: 100% 100%;
/* min-height: 900px;*/
width: 100%; width: 100%;
height: v-bind('computedHeight.centerHeight'); height: v-bind('computedHeight.centerHeight');
margin-bottom: 0; margin-bottom: 0;
@ -704,9 +471,43 @@ $labelHeight: 30px;
} }
.homeHeader{ .homeHeader{
display: flex; display: flex;
margin-bottom: 10px;
justify-content: space-between;
.cardLabel{ .cardLabel{
width: 100px; margin-right: 10px;
white-space: nowrap;
} }
.cardBtn{
white-space: nowrap;
:deep(.el-radio-group){
flex-wrap: nowrap;
}
:deep(.el-radio){
margin-right: 12px;
}
}
.headerRight{
width: 100%;
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;
color: #4E5969;
span{
color: #000000;
}
}
}
}
} }
} }

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

@ -105,31 +105,6 @@ const props = defineProps({
default: () => [], 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) => { const handleClick = (row) => {
if (!router.hasRoute('windTurbine')) { if (!router.hasRoute('windTurbine')) {
router.addRoute('admin', { router.addRoute('admin', {

232
ui/dasadmin/src/views/backend/home/windMatrixpage.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div class="FanList-content"> <div class="FanList-content">
<el-row :gutter="10"> <div class="overviewPart" v-for="item in props.parentData">
<el-col :xs="12" :sm="8" :md="8" :lg="4" :xl="3" v-for="item in props.parentData" style="margin-bottom: 5px"> <!-- <el-col :xs="12" :sm="8" :md="8" :lg="4" :xl="2" style="margin-bottom: 5px">-->
<div class="grid-content ep-bg-purple" <div class="grid-content"
@click="handleClick(item)" @click="handleClick(item)"
@contextmenu.prevent="windContextMenu($event,item)" @contextmenu.prevent="windContextMenu($event,item)"
> >
@ -37,19 +37,49 @@
>通讯中断</el-tag> >通讯中断</el-tag>
</div> </div>
<div class="fanlist-main"> <div class="fanlist-main">
<WindContentleft :item="item" v-if="item.layout==='风格1'"></WindContentleft> <el-row>
<WindContentright :item="item" v-else-if="item.layout==='风格2'"></WindContentright> <el-col :span="24">
<WindContentcenter :item="item" v-else-if="item.layout==='风格3'"></WindContentcenter> <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>
</el-row>
</div> </div>
<div class="fanlist-bottom"> <div class="fanlist-bottom">
<!-- <el-tag class="tag-panel is-danger">已锁定</el-tag>--> <span :style="item.attributeMap.locked == 1 ? 'max-width:120px;' : 'max-width:150px;'">
{{ item.attributeMap.firsttriggeredcode }}
</span>
<!-- <el-tag class="tag-panel is-danger">已锁定</el-tag>-->
<el-tag v-if="item.attributeMap.locked === 1" 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> </div>
</div> </div>
</el-col> <!-- </el-col>-->
</el-row> </div>
<ContextMenu :pos="contextMenuPos" v-model:visible="OperateVisible"> <ContextMenu :pos="contextMenuPos" v-model:visible="OperateVisible">
<template #default> <template #default>
@ -87,16 +117,14 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import {defineProps, ref} from 'vue' import {defineProps, ref,onMounted} from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { adminBaseRoutePath } from '/@/router/static/adminBase' import { adminBaseRoutePath } from '/@/router/static/adminBase'
import ContextMenu from '/@/views/backend/auth/model/contextMenu.vue' import ContextMenu from '/@/views/backend/auth/model/contextMenu.vue'
import { sendCommandReq, sendManualCommandReq } from '/@/api/backend/control/request' import { sendCommandReq, sendManualCommandReq } from '/@/api/backend/control/request'
import {ElMessage, ElMessageBox} from "element-plus"; import {ElMessage, ElMessageBox} from "element-plus";
import {equipUpdate} from '/@/api/backend/index.ts' import {equipUpdate} from '/@/api/backend/index.ts'
import WindContentleft from './windMatrixleft.vue' import {queryfaultCodeDict} from "/@/api/backend/theoreticalpowerCurve/request";
import WindContentright from './windMatrixright.vue'
import WindContentcenter from './windMatrixcenter.vue'
const router = useRouter() const router = useRouter()
const props = defineProps({ const props = defineProps({
@ -118,6 +146,7 @@ const getAnimationStyle = (item) => {
'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',
@ -264,7 +293,7 @@ const getStyles=(color) =>{
const rgbaColor = hexToRgba(color, 0.2); const rgbaColor = hexToRgba(color, 0.2);
return { return {
background: rgbaColor, background: rgbaColor,
border: `1px solid ${rgbaColor}`, border: `1px solid ${color}`,
color: color, color: color,
}; };
} else { } else {
@ -289,6 +318,106 @@ const hexToRgba = (hex, alpha) => {
} }
return `rgba(${r}, ${g}, ${b}, ${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/fannew/${path}`, import.meta.url).href;
getSafeImagePath.cache[path] = imagePath;
return imagePath;
};
let malFunctionEnums: any = {}
const getMalfunctionEnums = () => {
const curWindBlower = airBlowerList.value.find((item) => item.irn === route.query.irn)
queryfaultCodeDict({ madeinfactory: curWindBlower!.madeinfactory, model: curWindBlower!.model }).then((res) => {
if (res.code == 200) {
const data: any = {}
res.data.forEach((item: any) => {
data[item.code] = item.description
})
malFunctionEnums = data
}
})
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@ -335,8 +464,21 @@ const hexToRgba = (hex, alpha) => {
height: 30px; height: 30px;
vertical-align: middle; vertical-align: middle;
} }
.FanList-content.flex-start {
justify-content: flex-start;
}
.FanList-content { .FanList-content {
overflow-x: hidden; 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: 110px;
margin-top: 8px;
margin-bottom: 8px;
.FanList-panel { .FanList-panel {
border-radius: 8px; border-radius: 8px;
cursor: pointer; cursor: pointer;
@ -359,6 +501,12 @@ const hexToRgba = (hex, alpha) => {
.tag-panel { .tag-panel {
border-radius: 0 8px 0 0; border-radius: 0 8px 0 0;
line-height: 20px; line-height: 20px;
:deep(.el-tag__content){
max-width: 80px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
} }
.is-primary { .is-primary {
background: rgba(2, 119, 179, 0.2); background: rgba(2, 119, 179, 0.2);
@ -413,44 +561,35 @@ const hexToRgba = (hex, alpha) => {
position: absolute; position: absolute;
text-align: center; text-align: center;
top: 5px; top: 5px;
left: 17px; left: 19px;
/* 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: 44px;
height: 46px; height: 48px;
/*animation-duration: 1s;*/
animation-name: leafRotate; animation-name: leafRotate;
/*animation-iteration-count: infinite;
animation-timing-function: linear;*/
.leaf_1 { .leaf_1 {
width: 9px; width: 5px;
height: 19px; height: 14px;
position: absolute; position: absolute;
left: 17px; left: 19px;
top: -1px; top: 6px;
/* transform-origin: left top;*/
} }
.leaf_2 { .leaf_2 {
width: 9px; width: 5px;
height: 19px; height: 14px;
position: absolute; position: absolute;
left: 31px; left: 30px;
top: 20px; top: 22px;
/* transform-origin: left top;*/
transform: rotate(120deg); transform: rotate(120deg);
} }
.leaf_3 { .leaf_3 {
width: 9px; width: 5px;
height: 19px; height: 14px;
position: absolute; position: absolute;
left: 5px; left: 9px;
top: 22px; top: 22px;
/*transform-origin: left top;*/
transform: rotate(240deg); transform: rotate(240deg);
} }
} }
@ -472,14 +611,24 @@ const hexToRgba = (hex, alpha) => {
} }
.fanlist-bottom { .fanlist-bottom {
display: flex; display: flex;
justify-content: end; justify-content: space-between;
height: 24px; height: 24px;
span{
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #FE3731;
padding-left:5px;
}
.tag-panel { .tag-panel {
border-radius: 0 0 8px 0; border-radius: 0 0 8px 0;
line-height: 20px; line-height: 20px;
} }
} }
} }
}
.modelOperate{ .modelOperate{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -492,6 +641,13 @@ const hexToRgba = (hex, alpha) => {
} }
} }
} }
/*
.FanList-content::after {
content: '';
flex: auto;
!* 或者flex: 1 *!
}
*/
@media screen and (max-width: 1680px) { @media screen and (max-width: 1680px) {
.FanList-content { .FanList-content {