首页风机接口调试
@ -17,3 +17,18 @@ export const getInstitutionalListReq = (data: getDataType) => {
|
||||
data: data,
|
||||
})
|
||||
}
|
||||
|
||||
export function getWindFarmRealData(params: object = {}) {
|
||||
return createAxios({
|
||||
url: '/api/home/getWindFarmRealData',
|
||||
method: 'POST',
|
||||
data: params,
|
||||
})
|
||||
}
|
||||
export function getWindTurbineMatrixData(params: object = {}) {
|
||||
return createAxios({
|
||||
url: '/api/home/getWindTurbineMatrixData',
|
||||
method: 'POST',
|
||||
data: params,
|
||||
})
|
||||
}
|
||||
|
BIN
ui/dasadmin/src/assets/dashboard/leaf1.png
Normal file
After Width: | Height: | Size: 393 B |
BIN
ui/dasadmin/src/assets/dashboard/leaf2.png
Normal file
After Width: | Height: | Size: 396 B |
BIN
ui/dasadmin/src/assets/dashboard/status01.png
Normal file
After Width: | Height: | Size: 1.1 KiB |
BIN
ui/dasadmin/src/assets/dashboard/status02.png
Normal file
After Width: | Height: | Size: 981 B |
BIN
ui/dasadmin/src/assets/dashboard/status03.png
Normal file
After Width: | Height: | Size: 1.2 KiB |
BIN
ui/dasadmin/src/assets/dashboard/status04.png
Normal file
After Width: | Height: | Size: 1.2 KiB |
BIN
ui/dasadmin/src/assets/dashboard/status05.png
Normal file
After Width: | Height: | Size: 1.2 KiB |
BIN
ui/dasadmin/src/assets/dashboard/status06.png
Normal file
After Width: | Height: | Size: 1.1 KiB |
@ -11,14 +11,14 @@
|
||||
<div :sm="12" :lg="6" class="small-panel" style="margin-bottom: 10px;">
|
||||
<img class="small-panel-pic" src="~assets/dashboard/viewP.png" alt="">
|
||||
<div class="small-base">
|
||||
<div><span class="content-number">{{overviewData.power}}</span> <span>MW</span></div>
|
||||
<div><span class="content-number">{{realData.attributeMap.windfarmactivepower}}</span> <span>MW</span></div>
|
||||
<div>功率</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :sm="12" :lg="6" class="small-panel">
|
||||
<img class="small-panel-pic" src="~assets/dashboard/viewW.png" alt="">
|
||||
<div class="small-base">
|
||||
<div><span class="content-number">{{overviewData.windSpeed}}</span> <span>m/s</span></div>
|
||||
<div><span class="content-number">{{realData.attributeMap.windfarmavgwindspeed}}</span> <span>m/s</span></div>
|
||||
<div>风速</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -27,14 +27,14 @@
|
||||
<div :sm="12" :lg="6" class="small-panel" style="margin-bottom: 10px;">
|
||||
<img class="small-panel-pic" src="~assets/dashboard/viewR.png" alt="">
|
||||
<div class="small-base">
|
||||
<div><span class="content-number">{{overviewData.dailyUsageHours}}</span> <span>H</span></div>
|
||||
<div><span class="content-number">{{realData.attributeMap.windfarmdayoperationhours}}</span> <span>H</span></div>
|
||||
<div>日利用小时</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :sm="12" :lg="6" class="small-panel">
|
||||
<img class="small-panel-pic" src="~assets/dashboard/viewY.png" alt="">
|
||||
<div class="small-base">
|
||||
<div><span class="content-number">{{overviewData.monthlyUsageHours}}</span> <span>H</span></div>
|
||||
<div><span class="content-number">{{realData.attributeMap.windfarmmonthoperationhours}}</span> <span>H</span></div>
|
||||
<div>月利用小时</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -44,12 +44,12 @@
|
||||
|
||||
<!--今日运行状态-->
|
||||
<div class="status panelBg">
|
||||
<el-text class="mx-1 homelabel">今日运行状态</el-text>
|
||||
<el-text class="mx-1 homelabel" style="margin-bottom: 0;">今日运行状态</el-text>
|
||||
<el-row :gutter="10" class="statusrow">
|
||||
<el-col :span="12">
|
||||
<div class="status-panel">
|
||||
<img class="status-panel-pic" src="~assets/dashboard/status1.png" alt="">
|
||||
<div class="status-base">
|
||||
<div class="status-base-main">
|
||||
<div><span class="content-number">{{currentDayStatus.windTurbineNum}}</span> <span>台</span></div>
|
||||
<div>风机台数</div>
|
||||
</div>
|
||||
@ -58,7 +58,7 @@
|
||||
<el-col :span="12">
|
||||
<div class="status-panel">
|
||||
<img class="status-panel-pic" src="~assets/dashboard/status2.png" alt="">
|
||||
<div class="status-base">
|
||||
<div class="status-base-main">
|
||||
<div><span class="content-number">{{currentDayStatus.installedCapacity}}</span> <span>MW</span></div>
|
||||
<div>装机容量</div>
|
||||
</div>
|
||||
@ -69,25 +69,76 @@
|
||||
<el-col :span="12">
|
||||
<div class="status-panel status-con">
|
||||
<div>
|
||||
<img class="status-panel-piczt" src="~assets/dashboard/run.png" alt="">
|
||||
<img class="status-panel-piczt" src="~assets/dashboard/status04.png" alt="">
|
||||
<p>运行</p>
|
||||
</div>
|
||||
|
||||
<div class="status-base">
|
||||
<div><span>容量</span> <span class="content-number">{{currentDayStatus.runCapacity}}</span> <span>MW</span></div>
|
||||
<div><span>台数</span> <span class="content-number">{{currentDayStatus.runNum}}</span> <span>台</span></div>
|
||||
<div class="capacity">
|
||||
<p class="content-number">{{currentDayStatus.runCapacityTotal}}</p>
|
||||
<p>MW</p>
|
||||
</div>
|
||||
<div class="units">
|
||||
<p class="content-number">{{currentDayStatus.runNum}}</p>
|
||||
<p>台</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="status-panel status-con">
|
||||
<div>
|
||||
<img class="status-panel-piczt" src="~assets/dashboard/Standby.png" alt="">
|
||||
<p>待机</p>
|
||||
<img class="status-panel-piczt" src="~assets/dashboard/status03.png" alt="">
|
||||
<p>启动</p>
|
||||
</div>
|
||||
<div class="status-base">
|
||||
<div><span>容量</span> <span class="content-number">{{currentDayStatus.standbyCapacity}}</span> <span>MW</span></div>
|
||||
<div><span>台数</span> <span class="content-number">{{currentDayStatus.standbyNum}}</span> <span>台</span></div>
|
||||
<div class="capacity">
|
||||
<p class="content-number">{{currentDayStatus.StartCapacityTotal}}</p>
|
||||
<p>MW</p>
|
||||
</div>
|
||||
<div class="units">
|
||||
<p class="content-number">{{currentDayStatus.StarteNum}}</p>
|
||||
<p>台</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="10" class="statusrow">
|
||||
<el-col :span="12">
|
||||
<div class="status-panel status-con">
|
||||
<div>
|
||||
<img class="status-panel-piczt" src="~assets/dashboard/status01.png" alt="">
|
||||
<p>待机</p>
|
||||
</div>
|
||||
|
||||
<div class="status-base">
|
||||
<div class="capacity">
|
||||
<p class="content-number">{{currentDayStatus.faultCapacityTotal}}</p>
|
||||
<p>MW</p>
|
||||
</div>
|
||||
<div class="units">
|
||||
<p class="content-number">{{currentDayStatus.faultNum}}</p>
|
||||
<p>台</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="status-panel status-con">
|
||||
<div>
|
||||
<img class="status-panel-piczt" src="~assets/dashboard/status06.png" alt="">
|
||||
<p>停机</p>
|
||||
</div>
|
||||
|
||||
<div class="status-base">
|
||||
<div class="capacity">
|
||||
<p class="content-number">{{currentDayStatus.standbyCapacityTotal}}</p>
|
||||
<p>MW</p>
|
||||
</div>
|
||||
<div class="units">
|
||||
<p class="content-number">{{currentDayStatus.standbyNum}}</p>
|
||||
<p>台</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
@ -96,26 +147,38 @@
|
||||
<el-col :span="12">
|
||||
<div class="status-panel status-con">
|
||||
<div>
|
||||
<img class="status-panel-piczt" src="~assets/dashboard/fault.png" alt="">
|
||||
<p>故障</p>
|
||||
<img class="status-panel-piczt" src="~assets/dashboard/status02.png" alt="">
|
||||
<p>离线</p>
|
||||
</div>
|
||||
|
||||
<div class="status-base">
|
||||
<div><span>容量</span> <span class="content-number">{{currentDayStatus.faultCapacity}}</span> <span>MW</span></div>
|
||||
<div><span>台数</span> <span class="content-number">{{currentDayStatus.faultNum}}</span> <span>台</span></div>
|
||||
<div class="capacity">
|
||||
<p class="content-number">{{currentDayStatus.offlineCapacityTotal}}</p>
|
||||
<p>MW</p>
|
||||
</div>
|
||||
<div class="units">
|
||||
<p class="content-number">{{currentDayStatus.offlineNum}}</p>
|
||||
<p>台</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="status-panel status-con">
|
||||
<div>
|
||||
<img class="status-panel-piczt" src="~assets/dashboard/offline.png" alt="">
|
||||
<p>离线</p>
|
||||
<img class="status-panel-piczt" src="~assets/dashboard/status05.png" alt="">
|
||||
<p>维修</p>
|
||||
</div>
|
||||
|
||||
<div class="status-base">
|
||||
<div><span>容量</span> <span class="content-number">{{currentDayStatus.offlineCapacity}}</span> <span>MW</span></div>
|
||||
<div><span>台数</span> <span class="content-number">{{currentDayStatus.offlineNum}}</span> <span>台</span></div>
|
||||
<div class="capacity">
|
||||
<p class="content-number">{{currentDayStatus.StandCapacityTotal}}</p>
|
||||
<p>MW</p>
|
||||
</div>
|
||||
<div class="units">
|
||||
<p class="content-number">{{currentDayStatus.StandNum}}</p>
|
||||
<p>台</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
@ -140,7 +203,7 @@
|
||||
<!--风机矩阵-->
|
||||
<div class="matrix panelBg">
|
||||
<el-text class="mx-1 homelabel">风机矩阵</el-text>
|
||||
<WindContent></WindContent>
|
||||
<WindContent :parentData="FanList" @childEvent="StatusListData"></WindContent>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
@ -152,7 +215,7 @@
|
||||
<el-text class="mx-1 homelabel">发电量概况</el-text>
|
||||
<el-text class="mx-1" style="margin-bottom: 20px;">
|
||||
当日发电量
|
||||
<span class="content-number" style="color: #0277B3;">{{generationOverview.dailyGeneration}}</span>
|
||||
<span class="content-number" style="color: #0277B3;">{{realData.attributeMap.windfarmdayprodenergy}}</span>
|
||||
kWh
|
||||
</el-text>
|
||||
</div>
|
||||
@ -163,7 +226,7 @@
|
||||
<img src="~assets/dashboard/fdl1.png" alt="">
|
||||
</div>
|
||||
<div class="summarize-panel-base">
|
||||
<div><span class="content-number">{{generationOverview.dayGeneration}}</span></div>
|
||||
<div><span class="content-number">{{realData.attributeMap.windfarmdayprodenergy}}</span></div>
|
||||
<div><span>kWh</span></div>
|
||||
<div><span>日发电量</span></div>
|
||||
</div>
|
||||
@ -175,7 +238,7 @@
|
||||
<img src="~assets/dashboard/fdl2.png" alt="">
|
||||
</div>
|
||||
<div class="summarize-panel-base">
|
||||
<div><span class="content-number">{{generationOverview.monthGeneration}}</span></div>
|
||||
<div><span class="content-number">{{realData.attributeMap.windfarmmonthprodenergy}}</span></div>
|
||||
<div><span>万kWh</span></div>
|
||||
<div><span>月发电量</span></div>
|
||||
</div>
|
||||
@ -187,7 +250,7 @@
|
||||
<img src="~assets/dashboard/fdl3.png" alt="">
|
||||
</div>
|
||||
<div class="summarize-panel-base">
|
||||
<div><span class="content-number">{{generationOverview.yearGeneration}}</span></div>
|
||||
<div><span class="content-number">{{realData.attributeMap.windfarmyearprodenergy}}</span></div>
|
||||
<div><span>万kWh</span></div>
|
||||
<div><span>年发电量</span></div>
|
||||
</div>
|
||||
@ -199,7 +262,7 @@
|
||||
<img src="~assets/dashboard/fdl4.png" alt="">
|
||||
</div>
|
||||
<div class="summarize-panel-base">
|
||||
<div><span class="content-number">{{generationOverview.totalGeneration}}</span></div>
|
||||
<div><span class="content-number">{{realData.attributeMap.windfarmtotalprodenergy}}</span></div>
|
||||
<div><span>万kWh</span></div>
|
||||
<div><span>总发电量</span></div>
|
||||
</div>
|
||||
@ -255,11 +318,13 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {nextTick, onActivated, onMounted, reactive, ref,onBeforeMount} from "vue";
|
||||
import {nextTick, onActivated, onMounted, reactive, ref, onBeforeMount, onUnmounted} from "vue";
|
||||
import * as echarts from 'echarts'
|
||||
import { useTemplateRefsList,useEventListener } from '@vueuse/core'
|
||||
import {useI18n} from "vue-i18n";
|
||||
import WindContent from '/@/views/backend/home/windMatrix.vue'
|
||||
import {getWindFarmRealData,getWindTurbineMatrixData} from "/@/api/backend/dashboard.ts";
|
||||
import {ElMessage} from "element-plus";
|
||||
|
||||
|
||||
|
||||
@ -268,33 +333,118 @@ const { t } = useI18n()
|
||||
let timer = null
|
||||
let myTable = ref(null)
|
||||
|
||||
const overviewData=ref({
|
||||
"power": 56.2,
|
||||
"windSpeed": 45.3,
|
||||
"dailyUsageHours": 20,
|
||||
"monthlyUsageHours": 78
|
||||
})
|
||||
|
||||
const realData=ref({
|
||||
windFarmId: '',
|
||||
attributeMap: {}
|
||||
})
|
||||
const overviewList = () => {
|
||||
getWindFarmRealData().then((res) => {
|
||||
if (res.code == 200) {
|
||||
realData.value.windFarmId=res.data.windFarmId
|
||||
realData.value.attributeMap=res.data.attributeMap
|
||||
}else{
|
||||
ElMessage.error({
|
||||
message: res.msg,
|
||||
type: 'error',
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
const currentDayStatus=ref({
|
||||
"windTurbineNum": 40,
|
||||
"installedCapacity": 45.32,
|
||||
"runCapacity": 20.2,
|
||||
"runNum": 78,
|
||||
"standbyCapacity": 63.2,
|
||||
"standbyNum": 35,
|
||||
"faultCapacity": 56.4,
|
||||
"faultNum": 53,
|
||||
"offlineCapacity": 16.4,
|
||||
"offlineNum": 20
|
||||
windTurbineNum: 0,
|
||||
installedCapacity: 0,
|
||||
runCapacityTotal: 0,
|
||||
runNum: 0,
|
||||
standbyCapacityTotal: 0,
|
||||
standbyNum: 0,
|
||||
faultCapacityTotal: 0,
|
||||
faultNum: 0,
|
||||
offlineCapacityTotal: 0,
|
||||
offlineNum: 0,
|
||||
StandCapacityTotal: 0,
|
||||
StandNum: 0,
|
||||
StartCapacityTotal: 0,
|
||||
StarteNum: 0
|
||||
})
|
||||
const FanList = ref()
|
||||
const StatusListData = () => {
|
||||
getWindTurbineMatrixData().then((res) => {
|
||||
if (res.code == 200) {
|
||||
debugger
|
||||
const toalNum=res.data
|
||||
FanList.value=res.data
|
||||
currentDayStatus.value.windTurbineNum=toalNum.length
|
||||
toalNum.forEach((item,index) => {
|
||||
item.attributeMap.iwindspeed=item.attributeMap.iwindspeed !== undefined ? (item.attributeMap.iwindspeed % 1 === 0 ? item.attributeMap.iwindspeed : item.attributeMap.iwindspeed.toFixed(2)) : '--'
|
||||
item.attributeMap.igenpower=item.attributeMap.igenpower !== undefined ? (item.attributeMap.igenpower % 1 === 0 ? item.attributeMap.igenpower : item.attributeMap.igenpower.toFixed(2)) : '--'
|
||||
item.attributeMap.ikwhthisday=item.attributeMap.ikwhthisday !== undefined ? (item.attributeMap.ikwhthisday % 1 === 0 ? item.attributeMap.ikwhthisday : item.attributeMap.ikwhthisday.toFixed(2)) : '--'
|
||||
//item.attributeMap.nominalCapacity=item.attributeMap.nominalCapacity.toFixed(0)
|
||||
// 初始化计数器和累加器
|
||||
if (index === 0) {
|
||||
currentDayStatus.value.runNum = 0;
|
||||
currentDayStatus.value.standbyNum = 0;
|
||||
currentDayStatus.value.StandNum = 0;
|
||||
currentDayStatus.value.StarteNum = 0;
|
||||
currentDayStatus.value.offlineNum = 0;
|
||||
currentDayStatus.value.faultNum = 0;
|
||||
|
||||
currentDayStatus.value.runCapacityTotal = 0;
|
||||
currentDayStatus.value.standbyCapacityTotal = 0;
|
||||
currentDayStatus.value.StandCapacityTotal = 0;
|
||||
currentDayStatus.value.StartCapacityTotal = 0;
|
||||
currentDayStatus.value.offlineCapacityTotal = 0;
|
||||
currentDayStatus.value.faultCapacityTotal = 0;
|
||||
currentDayStatus.value.installedCapacity=0;
|
||||
}
|
||||
|
||||
// 更新容量
|
||||
if (item.nominalCapacity !== undefined) {
|
||||
currentDayStatus.value.installedCapacity += item.nominalCapacity;
|
||||
}
|
||||
|
||||
// 根据运行模式更新状态和数量
|
||||
const mode = item.attributeMap.iturbineoperationmode||item.attributeMap.iturbineoperationmode;
|
||||
if ([7, 8, 17, 18, 19, 20, 21].includes(mode)) {
|
||||
currentDayStatus.value.runCapacityTotal += item.nominalCapacity;
|
||||
currentDayStatus.value.runNum += 1;
|
||||
} else if ([1, 2, 3, 4, 5, 6].includes(mode)) {
|
||||
currentDayStatus.value.standbyCapacityTotal += item.nominalCapacity;
|
||||
currentDayStatus.value.standbyNum += 1;
|
||||
} else if ([9, 10, 12, 13, 14, 15].includes(mode)) {
|
||||
currentDayStatus.value.StandCapacityTotal += item.nominalCapacity;
|
||||
currentDayStatus.value.StandNum += 1;
|
||||
} else if (mode === 16) {
|
||||
currentDayStatus.value.StartCapacityTotal += item.nominalCapacity;
|
||||
currentDayStatus.value.StarteNum += 1;
|
||||
} else if (mode === 0) {
|
||||
currentDayStatus.value.offlineCapacityTotal += item.nominalCapacity;
|
||||
currentDayStatus.value.offlineNum += 1;
|
||||
} else if (mode === 11) {
|
||||
currentDayStatus.value.faultCapacityTotal += item.nominalCapacity;
|
||||
currentDayStatus.value.faultNum += 1;
|
||||
}
|
||||
/* currentDayStatus.value.runCapacityTotal = currentDayStatus.value.runCapacityTotal
|
||||
currentDayStatus.value.standbyCapacityTotal = currentDayStatus.value.standbyCapacityTotal
|
||||
currentDayStatus.value.StandCapacityTotal = currentDayStatus.value.StandCapacityTotal
|
||||
currentDayStatus.value.StartCapacityTotal = currentDayStatus.value.StartCapacityTotal
|
||||
currentDayStatus.value.offlineCapacityTotal = currentDayStatus.value.offlineCapacityTotal
|
||||
currentDayStatus.value.faultCapacityTotal = currentDayStatus.value.faultCapacityTotal
|
||||
currentDayStatus.value.installedCapacity=currentDayStatus.value.installedCapacity
|
||||
*/
|
||||
});
|
||||
|
||||
}else{
|
||||
ElMessage.error({
|
||||
message: res.msg,
|
||||
type: 'error',
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
const generationOverview=ref({
|
||||
"dailyGeneration": 63.2,
|
||||
"dayGeneration": 56.2,
|
||||
"monthGeneration": 60.2,
|
||||
"yearGeneration": 200.6,
|
||||
"totalGeneration": 500.6
|
||||
})
|
||||
const chartRefs = useTemplateRefsList<HTMLDivElement>()
|
||||
const state: {
|
||||
charts: any[]
|
||||
@ -687,6 +837,9 @@ onMounted(() => {
|
||||
inittrendChart('日','1')
|
||||
initpowerChart()
|
||||
createScroll()
|
||||
overviewList()
|
||||
StatusListData()
|
||||
autoUpdate()
|
||||
useEventListener(window, 'resize', echartsResize)
|
||||
})
|
||||
onBeforeMount(() => {
|
||||
@ -707,7 +860,19 @@ const tabhandleClick = (tabName) => {
|
||||
}
|
||||
|
||||
}
|
||||
let autoUpdateTimer: any = null
|
||||
const autoUpdate = () => {
|
||||
if (!autoUpdateTimer) {
|
||||
autoUpdateTimer = setInterval(() => {
|
||||
StatusListData()
|
||||
}, 2000)
|
||||
}
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer)
|
||||
autoUpdateTimer && clearInterval(autoUpdateTimer)
|
||||
});
|
||||
|
||||
|
||||
|
||||
@ -750,8 +915,8 @@ const tabhandleClick = (tabName) => {
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
.small-panel-pic{
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.small-base{
|
||||
margin-left: 10px;
|
||||
@ -776,11 +941,19 @@ const tabhandleClick = (tabName) => {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
.status-base{
|
||||
.status-base-main{
|
||||
margin-left: 10px;
|
||||
line-height: 23px;
|
||||
padding-top: 6px;
|
||||
}
|
||||
.status-base{
|
||||
margin-left: 10px;
|
||||
line-height: 23px;
|
||||
padding: 6px 10px 0 10px;;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
.status-panel-piczt{
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
@ -791,7 +964,7 @@ const tabhandleClick = (tabName) => {
|
||||
.power{
|
||||
.power-chart{
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
height: 250px;
|
||||
}
|
||||
}
|
||||
.matrix{
|
||||
@ -820,7 +993,7 @@ const tabhandleClick = (tabName) => {
|
||||
|
||||
}
|
||||
.trend{
|
||||
height: 350px;
|
||||
height: 370px;
|
||||
overflow: hidden;
|
||||
.trend-tabs{
|
||||
:deep(.el-tabs__item){
|
||||
|
@ -1,28 +1,44 @@
|
||||
<template>
|
||||
<div class="FanList-content">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="8" v-for="(item, index) in FanList" style="margin-bottom: 10px;">
|
||||
<el-col :span="8" v-for="(item, index) in props.parentData" style="margin-bottom: 10px;">
|
||||
<div class="grid-content ep-bg-purple">
|
||||
<div class="FanList-panel" :class="item.standard==true ? 'wind-mark' : 'wind-default'">
|
||||
<div class="fanlist-top">
|
||||
<span :class="item.standard==true ? 'wind-mark-icon' : 'fanlist-icon'">
|
||||
<img :class="item.standard==true ? '' : 'wind-picture'" src="~assets/dashboard/biaogan.png" alt="">
|
||||
</span>
|
||||
<span class="fanlist-name"> {{ item.windTurbine }}</span>
|
||||
<el-tag class="tag-panel" :class="getItemClass(item)" type="primary">{{ item.windStatus }}</el-tag>
|
||||
<span class="fanlist-name"> {{ item.name }}</span>
|
||||
<!-- <el-tag class="tag-panel" :class="getItemClass(item)" type="primary">{{ realTimeDataState}}</el-tag>-->
|
||||
<el-tag v-if="item.attributeMap.iturbineoperationmode === 20" class="tag-panel is-primary" type="primary">并网</el-tag>
|
||||
<el-tag v-if="item.attributeMap.iturbineoperationmode === 21" class="tag-panel is-primary" type="primary">并网</el-tag>
|
||||
<el-tag v-if="item.attributeMap.iturbineoperationmode === 11" class="tag-panel is-warning" type="primary">待机</el-tag>
|
||||
<el-tag v-if="item.attributeMap.iturbineoperationmode === 16" class="tag-panel is-success" type="primary">启动</el-tag>
|
||||
<el-tag v-if="item.attributeMap.iturbineoperationmode === 10" class="tag-panel is-maintenance" type="primary">维护</el-tag>
|
||||
<el-tag v-if="item.attributeMap.iturbineoperationmode === 0" class="tag-panel is-offline" type="primary">离线</el-tag>
|
||||
<el-tag v-if="item.attributeMap.iturbineoperationmode === 8" class="tag-panel info" type="primary">限功率运行</el-tag>
|
||||
<el-tag v-if="item.attributeMap.iturbineoperationmode === 6" class="tag-panel is-danger" type="primary">正常停机</el-tag>
|
||||
<el-tag v-if="item.attributeMap.iturbineoperationmode === 1" class="tag-panel is-danger" type="primary">外部因素导致停机</el-tag>
|
||||
<el-tag v-if="item.attributeMap.iturbineoperationmode === 11" class="tag-panel is-danger" type="primary">停机</el-tag>
|
||||
<el-tag v-if="item.attributeMap.iyplevel === 10" class="tag-panel is-info" type="primary">解缆状态</el-tag>
|
||||
<el-tag v-if="item.attributeMap.gridlostdetected === 1" class="tag-panel is-danger" type="primary">电网故障停机</el-tag>
|
||||
<el-tag v-if="item.attributeMap.ibplevel === 200" class="tag-panel is-danger" type="primary">安全链停机</el-tag>
|
||||
|
||||
</div>
|
||||
<div class="fanlist-main">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<div class="fanlist-pic">
|
||||
<!-- <div class="mask">
|
||||
<div class="leafs">
|
||||
<div class="leaf_1"></div>
|
||||
<div class="leaf_2"></div>
|
||||
<div class="leaf_3"></div>
|
||||
<div class="mask">
|
||||
<div class="heart"><img src="~assets/dashboard/leaf2.png" alt=""></div>
|
||||
<div class="leafs" :style="animationDuration">
|
||||
<div class="leaf_1"> <img src="~assets/dashboard/leaf1.png" alt=""></div>
|
||||
<div class="leaf_2"><img src="~assets/dashboard/leaf1.png" alt=""></div>
|
||||
<div class="leaf_3"><img src="~assets/dashboard/leaf1.png" alt=""></div>
|
||||
</div>
|
||||
</div>-->
|
||||
<img src="~assets/dashboard/fanlist1.png" alt="">
|
||||
|
||||
</div>
|
||||
<!-- <img src="~assets/dashboard/fanlist1.png" alt="">-->
|
||||
<!-- <img class="fc" src="~assets/dashboard/fanlist1.png" alt=""></img>-->
|
||||
<!-- <img :style="{ transform: `rotate(${rotationDegrees}deg)` }" src="~assets/dashboard/fanlist1.png" alt="">-->
|
||||
</div>
|
||||
@ -33,13 +49,13 @@
|
||||
</el-row>
|
||||
<el-row class="fanlist-data">
|
||||
<el-col :span="8">
|
||||
<div class="fanlist-text"><span class="content-number">{{ item.windSpeed }}</span><span>风速m/s</span></div>
|
||||
<div class="fanlist-text"><span class="content-number">{{ item.attributeMap.iwindspeed }}</span><span>风速m/s</span></div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="fanlist-text"><span class="content-number">{{ item.power }}</span><span>功率MW</span></div>
|
||||
<div class="fanlist-text"><span class="content-number">{{ item.attributeMap.igenpower }}</span><span>功率MW</span></div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="fanlist-text"><span class="content-number">{{ item.dayGeneration }}</span><span>日发电量kWh</span></div>
|
||||
<div class="fanlist-text"><span class="content-number">{{ item.attributeMap.ikwhthisday }}</span><span>日发电量kWh</span></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
@ -52,79 +68,42 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref ,onMounted,onUnmounted } from 'vue'
|
||||
import {reactive,defineProps, defineEmits} from 'vue'
|
||||
|
||||
const FanList = ref([
|
||||
{windSpeed:'10.34','power':'10.34','dayGeneration':'10.34',windStatus:'并网',windTurbine:'A-001',standard:true},
|
||||
{windSpeed:'34','power':'10.34','dayGeneration':'10.34',windStatus:'待机',windTurbine:'A-002',standard:false},
|
||||
{windSpeed:'11','power':'10.34','dayGeneration':'10.34',windStatus:'启动',windTurbine:'A-003',standard:false},
|
||||
{windSpeed:'45','power':'10.34','dayGeneration':'10.34',windStatus:'解缆',windTurbine:'A-004',standard:false},
|
||||
{windSpeed:'12','power':'10.34','dayGeneration':'10.34',windStatus:'电网故障停机',windTurbine:'A-005',standard:false},
|
||||
{windSpeed:'10','power':'10.34','dayGeneration':'10.34',windStatus:'维护',windTurbine:'A-006',standard:false}
|
||||
])
|
||||
|
||||
const getItemClass = (FanList) => {
|
||||
switch (FanList.windStatus) {
|
||||
case '并网':
|
||||
return 'is-primary';
|
||||
case '并网- AGC限功率':
|
||||
return 'is-primary';
|
||||
case '解缆':
|
||||
return 'is-info';
|
||||
case '待机':
|
||||
return 'is-warning';
|
||||
case '故障':
|
||||
return 'is-warning';
|
||||
case '启动':
|
||||
return 'is-success';
|
||||
case '电网故障停机':
|
||||
return 'is-danger';
|
||||
case '风速超限停机':
|
||||
return 'is-danger';
|
||||
case '故障停机':
|
||||
return 'is-danger';
|
||||
case '塔基手动停机':
|
||||
return 'is-danger';
|
||||
case '远程监控停机':
|
||||
return 'is-danger';
|
||||
case 'AGC停机':
|
||||
return 'is-danger';
|
||||
case '集控停机':
|
||||
return 'is-danger';
|
||||
case '小风停机':
|
||||
return 'is-danger';
|
||||
case '维护':
|
||||
return 'is-maintenance';
|
||||
default:
|
||||
return '';
|
||||
const props = defineProps({
|
||||
parentData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
return { FanList, getItemClass };
|
||||
};
|
||||
|
||||
const rotationDegrees = ref(0)
|
||||
const speed = 5; // 设定一个基本旋转速度
|
||||
function startRotation(speed) {
|
||||
return setInterval(() => {
|
||||
rotationDegrees.value += 100;
|
||||
}, 100); // 每100毫秒旋转一次
|
||||
}
|
||||
let intervalId;
|
||||
})
|
||||
const emit = defineEmits(['childEvent'])
|
||||
const rotationspeed = 4;
|
||||
const animationDuration=reactive({
|
||||
'animation-duration': rotationspeed+'s',
|
||||
})
|
||||
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
// 当组件挂载时开始旋转
|
||||
intervalId = startRotation(speed);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
// 当组件卸载时清除定时器
|
||||
clearInterval(intervalId);
|
||||
});
|
||||
|
||||
</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;
|
||||
@ -218,6 +197,51 @@ onUnmounted(() => {
|
||||
.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{
|
||||
|
@ -368,51 +368,15 @@ const tableRef=ref<any>()
|
||||
const multipleSelection = ref<TableType[]>([])
|
||||
const Statistic = computed(() => multipleSelection.value.length)
|
||||
const selectTable = (selected: TableType[] | null) => {
|
||||
// if (isCheckRow) {
|
||||
// isCheckRow = false;
|
||||
// return;
|
||||
// }
|
||||
if (!selected) {
|
||||
console.error('Selected is null or undefined')
|
||||
return
|
||||
}
|
||||
/* if (Array.isArray(selected) && Array.isArray(multipleSelection.value)) {
|
||||
const selectedAttributeCodes = new Set(selected.map(item => item?.attributeCode));
|
||||
multipleSelection.value = multipleSelection.value.filter(item => selectedAttributeCodes.has(item?.attributeCode));
|
||||
selected.forEach((item, index) => {
|
||||
if (!multipleSelection.value.some(item1 => item1.attributeCode === item.attributeCode)) {
|
||||
multipleSelection.value.push(item);
|
||||
}
|
||||
});
|
||||
}*/
|
||||
//const selectedAttributeCodes = new Set(selected.map(item => item?.attributeCode));
|
||||
//multipleSelection.value = multipleSelection.value.filter(item => selectedAttributeCodes.has(item?.attributeCode));
|
||||
selected.forEach((item, index) => {
|
||||
if (!multipleSelection.value.some(item1 => item1.attributeCode === item.attributeCode)) {
|
||||
multipleSelection.value.push(item);
|
||||
//ElMessage.success(`添加成功`)
|
||||
}
|
||||
/*else{
|
||||
ElMessage.warning(`当前页面中已存在${item.attributeName}`)
|
||||
}*/
|
||||
});
|
||||
//const selectedCopy = multipleSelection.value;
|
||||
/*if(multipleSelection.value.length>0){
|
||||
multipleSelection.value = JSON.parse(JSON.stringify(selected));
|
||||
}*/
|
||||
//multipleSelection.value = JSON.parse(JSON.stringify(selected));
|
||||
// selected.forEach((item, index) => {
|
||||
// multipleSelection.value.push({...item});
|
||||
// });
|
||||
// if (Array.isArray(selected) && Array.isArray(multipleSelection.value)) {
|
||||
// const selectedAttributeCodes = new Set(selected.map(item => item?.attributeCode));
|
||||
// multipleSelection.value = multipleSelection.value.filter(item => selectedAttributeCodes.has(item?.attributeCode));
|
||||
// selected.forEach((item, index) => {
|
||||
// if (!multipleSelection.value.some(item1 => item1.attributeCode === item.attributeCode)) {
|
||||
// multipleSelection.value.push(item);
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
}
|
||||
//const getRowKey = (row) => row.id;
|
||||
const getRowKey = (row) => row.attributeCode;
|
||||
@ -448,20 +412,14 @@ const moveDown = (index:number) => {
|
||||
|
||||
const removeremove=(index:number, row:any)=>{
|
||||
multipleSelection.value.splice(index, 1);
|
||||
// const row = multipleSelection.value.splice(index, 1);
|
||||
nextTick(() => {
|
||||
isCheckRow = true;
|
||||
const finIindexNum = modalTbleData.value.findIndex((item: any) => item.attributeCode === row.attributeCode);
|
||||
if (finIindexNum !== -1) {
|
||||
tableRef.value.toggleRowSelection(modalTbleData.value[finIindexNum], false, false);
|
||||
ElMessage.success('删除成功')
|
||||
} else {
|
||||
ElMessage.warning(`当前页面中不存在${row.attributeName},请切换到别的分页操作`)
|
||||
}
|
||||
//selectTable(row)
|
||||
})
|
||||
//selectTable(multipleSelection.value)
|
||||
//tableRef.value.clearSelection()
|
||||
|
||||
}
|
||||
const clearList=() => {
|
||||
@ -537,20 +495,6 @@ const objparms = reactive({
|
||||
const getTableData = () => {
|
||||
const deviceId=deviceList.value.map((item) => item.id);
|
||||
const tableColumnEnds = ref([]);
|
||||
/*const tableColumnup = ref([]);
|
||||
const tableColumnMap = new Map();
|
||||
tableColumn.value.forEach(item1 => {
|
||||
if (item1.prop) {
|
||||
tableColumnMap.set(item1.prop, item1);
|
||||
tableColumnup.value.push({
|
||||
label: item1.label,
|
||||
unit:item1.unit,
|
||||
prop: item1.prop,
|
||||
align: 'center',
|
||||
custom: 'header',
|
||||
});
|
||||
}
|
||||
});*/
|
||||
if(multipleSelection.value.length === 0){
|
||||
tableColumn.value = [...tableItem0, ...tableColumnEnds.value];
|
||||
}else{
|
||||
@ -617,9 +561,7 @@ const getTableData = () => {
|
||||
// newItem[rowKey] = item[rowKey];
|
||||
// }
|
||||
// }
|
||||
// console.log(newItem, item1, 'newItemnewItemnewItem')
|
||||
const value = tsnapshotVoObject[itemKey]?.[attributeCodeLower];
|
||||
//console.log(tsnapshotVoObject[itemKey], value, 'valuevaluevaluevalue');
|
||||
const formattedValue = value !== undefined ? (value % 1 === 0 ? value : value.toFixed(3)) : '-';
|
||||
//arr[i] = { code: item.code, [attributeCodeLower]: formattedValue,[ipitchangle]: ipitchanglevalue};
|
||||
arr[i] = { ...item, [attributeCodeLower]: formattedValue,[ipitchangle]: ipitchanglevalue};
|
||||
@ -627,7 +569,6 @@ const getTableData = () => {
|
||||
}
|
||||
});
|
||||
})
|
||||
//console.log(tableData.value, multipleSelection.value, 'tableData.valuetableData.valuetableData.valuetableData.value');
|
||||
} else {
|
||||
ElMessage.error({
|
||||
message: res.msg,
|
||||
@ -642,74 +583,10 @@ const sureBtn = (done: () => void) => {
|
||||
visible.value = false
|
||||
}
|
||||
const downFun=(tableColumn,tableData)=>{
|
||||
debugger
|
||||
const itemsWithoutAge = tableData.map(item => {
|
||||
const { id, belongLine, iotModelId, location,madeinFactory,model,name,nominalCapacity,objectType,parentEquipmentId,remarks,standard,...rest } = item;
|
||||
return rest;
|
||||
});
|
||||
debugger;
|
||||
/*let itemsWithoutAge;
|
||||
tableColumn.forEach(item1 => {
|
||||
if (item1.prop) {
|
||||
tableData.forEach((item: any, i: number) => {
|
||||
for (const itemKey in item) {
|
||||
if(item1.prop!=='code'){
|
||||
if(item1.prop==itemKey){
|
||||
/!*itemsWithoutAge=tableData.map(item => {
|
||||
const {
|
||||
id,
|
||||
belongLine,
|
||||
iotModelId,
|
||||
location,
|
||||
madeinFactory,
|
||||
model,
|
||||
name,
|
||||
nominalCapacity,
|
||||
objectType,
|
||||
parentEquipmentId,
|
||||
remarks,
|
||||
standard,
|
||||
igenpower,
|
||||
igenspeed,
|
||||
ihydrpress,
|
||||
ikwhoverall,
|
||||
ikwhthisday,
|
||||
ipitchangle,
|
||||
irotorspeed,
|
||||
iwindspeed,
|
||||
itempnacelle_1sec,
|
||||
ipitchangle1,
|
||||
...rest
|
||||
} = item;
|
||||
return rest;
|
||||
});*!/
|
||||
}else{
|
||||
itemsWithoutAge=tableData.map(item => {
|
||||
const {
|
||||
id,
|
||||
belongLine,
|
||||
iotModelId,
|
||||
location,
|
||||
madeinFactory,
|
||||
model,
|
||||
name,
|
||||
nominalCapacity,
|
||||
objectType,
|
||||
parentEquipmentId,
|
||||
remarks,
|
||||
standard,
|
||||
...rest
|
||||
} = item;
|
||||
return rest;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
})*/
|
||||
let addobj = {}
|
||||
tableColumn.map((v, i) => {
|
||||
addobj['rowData' + i] = v.label
|
||||
@ -717,7 +594,6 @@ const downFun=(tableColumn,tableData)=>{
|
||||
let tableDatadown = JSON.parse(JSON.stringify(itemsWithoutAge))
|
||||
tableDatadown.unshift(addobj)
|
||||
console.log(tableDatadown, 'tableDatadowntableDatadowntableDatadown')
|
||||
debugger;
|
||||
let str = ``;
|
||||
for(let i = 0; i < tableDatadown.length; i++) {
|
||||
for(let item in tableDatadown[i]) {
|
||||
|