Merge remote-tracking branch 'origin/main'
This commit is contained in:
yu
commit
508a88831d
BIN
ui/dasadmin/src/assets/dashboard/bg3.png
Normal file
BIN
ui/dasadmin/src/assets/dashboard/bg3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
ui/dasadmin/src/assets/dashboard/fan/heart11.png
Normal file
BIN
ui/dasadmin/src/assets/dashboard/fan/heart11.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 369 B |
@ -296,7 +296,33 @@ const currentDayStatus = ref({
|
||||
const deviceCode = ref([])
|
||||
const FanList = ref([])
|
||||
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) {
|
||||
currentDayStatus.value.windTurbineNum = res.data.length
|
||||
const data = res.data.map((item, index) => {
|
||||
|
||||
@ -1,148 +1,40 @@
|
||||
<template>
|
||||
<div class="default-main" ref="HomeHight">
|
||||
<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;">
|
||||
<div class="grid-content ep-bg-purple-light">
|
||||
<!--风机矩阵-->
|
||||
<div class="matrix panelBg">
|
||||
<div class="homeHeader">
|
||||
<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>
|
||||
|
||||
<el-scrollbar>
|
||||
@ -159,20 +51,24 @@
|
||||
import { onMounted, reactive, ref, onUnmounted } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import WindContent from '/@/views/backend/home/windMatrixpage.vue'
|
||||
import { equipList } from '/@/api/backend/realData/request'
|
||||
import { getWindFarmRealData, getWindTurbineMatrixData, getHistoryData } from '/@/api/backend/dashboard.ts'
|
||||
import { getWindFarmRealData, getWindTurbineMatrixData } from '/@/api/backend/dashboard.ts'
|
||||
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 { getAlarmListReq, eventComfirm } from '/@/api/backend/alarms/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 { t } = useI18n()
|
||||
let timer: any = null
|
||||
let myTable = ref<TableInstance>()
|
||||
|
||||
const overviewSlotData= ref('一期')
|
||||
|
||||
const realData = ref({
|
||||
windFarmId: '',
|
||||
attributeMap: {},
|
||||
@ -189,8 +85,8 @@ const attributeList = ref({
|
||||
'turbinecountpowerprod',
|
||||
'turbinecountidle',
|
||||
'turbinecountdisconnected',
|
||||
'turbinecountservice'
|
||||
|
||||
'turbinecountservice',
|
||||
'turbinecountfaulted'
|
||||
]
|
||||
})
|
||||
|
||||
@ -236,6 +132,12 @@ const overviewList = () => {
|
||||
? res.data.attributeMap.turbinecountservice
|
||||
: res.data.attributeMap.turbinecountservice.toFixed(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 = {
|
||||
windFarmId: res.data.windFarmId,
|
||||
attributeMap: {
|
||||
@ -248,7 +150,8 @@ const overviewList = () => {
|
||||
turbinecountpowerprod: res.data.attributeMap.turbinecountpowerprod,
|
||||
turbinecountidle: res.data.attributeMap.turbinecountidle,
|
||||
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,
|
||||
StarteNum: 0,
|
||||
})
|
||||
|
||||
const deviceCode = ref([])
|
||||
const FanList = ref([])
|
||||
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) {
|
||||
currentDayStatus.value.windTurbineNum = res.data.length
|
||||
const data = res.data.map((item, index) => {
|
||||
let color:any=''
|
||||
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) => {
|
||||
if (item.state == state) {
|
||||
color = item.color
|
||||
@ -403,6 +338,7 @@ const StatusListData = () => {
|
||||
color:color,
|
||||
locked: item.attributeMap.locked,
|
||||
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
|
||||
@ -532,7 +373,7 @@ const computedHeight = reactive({
|
||||
const sizeChange = () => {
|
||||
const rect = HomeHight.value?.getBoundingClientRect()
|
||||
if (!rect) return
|
||||
computedHeight.centerHeight = rect.height - 190 + 'px'
|
||||
computedHeight.centerHeight = rect.height - 0 + 'px'
|
||||
if (window.screen.width < 1360) {
|
||||
computedHeight.centerHeight = rect.height - 0 + 'px'
|
||||
}
|
||||
@ -546,18 +387,9 @@ onMounted(() => {
|
||||
window.addEventListener('resize', sizeChange)
|
||||
sizeChange()
|
||||
//getAllChartData()
|
||||
createScroll()
|
||||
overviewList()
|
||||
StatusListData()
|
||||
autoUpdate()
|
||||
|
||||
equipList({ objectType: 10002 }).then((res) => {
|
||||
res.data.map((item: any) => {
|
||||
deviceCode.value.push(item.code)
|
||||
})
|
||||
|
||||
getTableData(deviceCode.value)
|
||||
})
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
@ -615,70 +447,6 @@ $labelHeight: 30px;
|
||||
margin-bottom: 10px;
|
||||
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 {
|
||||
/* overflow-x: hidden;*/
|
||||
width: 100%;
|
||||
@ -693,9 +461,8 @@ $labelHeight: 30px;
|
||||
|
||||
.matrix {
|
||||
@include cardlabel;
|
||||
background: url('/@/assets/dashboard/bg2.png') no-repeat #ffffff;
|
||||
background: url('/@/assets/dashboard/bg3.png') no-repeat #ffffff;
|
||||
background-size: 100% 100%;
|
||||
/* min-height: 900px;*/
|
||||
width: 100%;
|
||||
height: v-bind('computedHeight.centerHeight');
|
||||
margin-bottom: 0;
|
||||
@ -704,9 +471,43 @@ $labelHeight: 30px;
|
||||
}
|
||||
.homeHeader{
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
justify-content: space-between;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -105,31 +105,6 @@ 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', {
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<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"
|
||||
<div class="overviewPart" v-for="item in props.parentData">
|
||||
<!-- <el-col :xs="12" :sm="8" :md="8" :lg="4" :xl="2" style="margin-bottom: 5px">-->
|
||||
<div class="grid-content"
|
||||
@click="handleClick(item)"
|
||||
@contextmenu.prevent="windContextMenu($event,item)"
|
||||
>
|
||||
@ -37,19 +37,49 @@
|
||||
>通讯中断</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>
|
||||
</el-row>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- </el-col>-->
|
||||
</div>
|
||||
|
||||
<ContextMenu :pos="contextMenuPos" v-model:visible="OperateVisible">
|
||||
<template #default>
|
||||
@ -87,16 +117,14 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {defineProps, ref} from 'vue'
|
||||
import {defineProps, ref,onMounted} 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'
|
||||
import {queryfaultCodeDict} from "/@/api/backend/theoreticalpowerCurve/request";
|
||||
|
||||
const router = useRouter()
|
||||
const props = defineProps({
|
||||
@ -118,6 +146,7 @@ const getAnimationStyle = (item) => {
|
||||
'animation-direction': 'normaL',
|
||||
}
|
||||
}else{
|
||||
|
||||
return {
|
||||
'animation-duration': `${animationDuration}s`,
|
||||
'animation-timing-function': 'linear',
|
||||
@ -264,7 +293,7 @@ const getStyles=(color) =>{
|
||||
const rgbaColor = hexToRgba(color, 0.2);
|
||||
return {
|
||||
background: rgbaColor,
|
||||
border: `1px solid ${rgbaColor}`,
|
||||
border: `1px solid ${color}`,
|
||||
color: color,
|
||||
};
|
||||
} else {
|
||||
@ -289,6 +318,106 @@ 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/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>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -335,151 +464,171 @@ const hexToRgba = (hex, alpha) => {
|
||||
height: 30px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.FanList-content.flex-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.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: 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 {
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
.fanlist-top {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
.fanlist-icon {
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.fanlist-text {
|
||||
margin-top: 5px;
|
||||
.fanlist-name {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
.content-number {
|
||||
color: #333333;
|
||||
font-size: 20px;
|
||||
padding-right: 5px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.tag-panel {
|
||||
border-radius: 0 8px 0 0;
|
||||
line-height: 20px;
|
||||
:deep(.el-tag__content){
|
||||
max-width: 80px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.fanlist-text span {
|
||||
display: inline-block;
|
||||
.is-primary {
|
||||
background: rgba(2, 119, 179, 0.2);
|
||||
border: 1px solid #0277b3;
|
||||
color: #0277b3;
|
||||
}
|
||||
}
|
||||
.fanlist-bottom {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
height: 24px;
|
||||
.tag-panel {
|
||||
border-radius: 0 0 8px 0;
|
||||
line-height: 20px;
|
||||
.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: 19px;
|
||||
}
|
||||
.leafs {
|
||||
position: absolute;
|
||||
transform-origin: center center;
|
||||
width: 44px;
|
||||
height: 48px;
|
||||
animation-name: leafRotate;
|
||||
.leaf_1 {
|
||||
width: 5px;
|
||||
height: 14px;
|
||||
position: absolute;
|
||||
left: 19px;
|
||||
top: 6px;
|
||||
}
|
||||
.leaf_2 {
|
||||
width: 5px;
|
||||
height: 14px;
|
||||
position: absolute;
|
||||
left: 30px;
|
||||
top: 22px;
|
||||
transform: rotate(120deg);
|
||||
}
|
||||
.leaf_3 {
|
||||
width: 5px;
|
||||
height: 14px;
|
||||
position: absolute;
|
||||
left: 9px;
|
||||
top: 22px;
|
||||
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: space-between;
|
||||
height: 24px;
|
||||
span{
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: #FE3731;
|
||||
padding-left:5px;
|
||||
}
|
||||
.tag-panel {
|
||||
border-radius: 0 0 8px 0;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modelOperate{
|
||||
display: flex;
|
||||
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) {
|
||||
.FanList-content {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user