首页：布局调整
This commit is contained in:
fengrong
parent
6b412f3b06
commit
458d9d89c7
BIN
ui/dasadmin/src/assets/dashboard/alert01.png
Normal file
BIN
ui/dasadmin/src/assets/dashboard/alert01.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 979 B |
BIN
ui/dasadmin/src/assets/dashboard/overview01.png
Normal file
BIN
ui/dasadmin/src/assets/dashboard/overview01.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
ui/dasadmin/src/assets/dashboard/overview02.png
Normal file
BIN
ui/dasadmin/src/assets/dashboard/overview02.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
ui/dasadmin/src/assets/dashboard/overview03.png
Normal file
BIN
ui/dasadmin/src/assets/dashboard/overview03.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.1 KiB |
BIN
ui/dasadmin/src/assets/dashboard/overview04.png
Normal file
BIN
ui/dasadmin/src/assets/dashboard/overview04.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
ui/dasadmin/src/assets/dashboard/overview05.png
Normal file
BIN
ui/dasadmin/src/assets/dashboard/overview05.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
ui/dasadmin/src/assets/dashboard/overview06.png
Normal file
BIN
ui/dasadmin/src/assets/dashboard/overview06.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
@ -1,24 +1,117 @@
|
||||
<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 :sm="24" :md="12" :lg="4">
|
||||
<div class="overviewItem" style="margin-left: 0px;">
|
||||
<img class="small-panel-pic" src="~assets/dashboard/overview01.png" alt="" />
|
||||
<div class="small-base">
|
||||
<div class="small-title">全厂平均风速</div>
|
||||
<div class="small-value">
|
||||
<span class="content-number">{{realData.attributeMap.windfarmavgwindspeed}}</span>
|
||||
<span>m/s</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :sm="24" :md="12" :lg="4">
|
||||
<div class="overviewItem">
|
||||
<img class="small-panel-pic" src="~assets/dashboard/overview02.png" alt="" />
|
||||
<div class="small-base">
|
||||
<div class="small-title">全厂实时有功</div>
|
||||
<div class="small-value">
|
||||
<span class="content-number">{{realData.attributeMap.windfarmactivepower}}</span>
|
||||
<span>MW</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :sm="24" :md="12" :lg="4">
|
||||
<div class="overviewItem">
|
||||
<img class="small-panel-pic" src="~assets/dashboard/overview03.png" alt="" />
|
||||
<div class="small-base">
|
||||
<div class="small-title">全厂实时无功</div>
|
||||
<div class="small-value">
|
||||
<span class="content-number">{{realData.attributeMap.windfarmreactivepower}}</span>
|
||||
<span>kvar</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :sm="24" :md="12" :lg="4">
|
||||
<div class="overviewItem">
|
||||
<img class="small-panel-pic" src="~assets/dashboard/overview04.png" alt="" />
|
||||
<div class="small-base">
|
||||
<div class="small-title">日发电量</div>
|
||||
<div class="small-value">
|
||||
<span class="content-number">{{realData.attributeMap.windfarmdayprodenergy}}</span>
|
||||
<span>kWh</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :sm="24" :md="12" :lg="4">
|
||||
<div class="overviewItem">
|
||||
<img class="small-panel-pic" src="~assets/dashboard/overview05.png" alt="" />
|
||||
<div class="small-base">
|
||||
<div class="small-title">本月发电量</div>
|
||||
<div class="small-value">
|
||||
<span class="content-number">{{realData.attributeMap.windfarmmonthprodenergy}}</span>
|
||||
<span>kWh</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :sm="24" :md="12" :lg="4">
|
||||
<div class="overviewItem" style="margin-right: 0px;">
|
||||
<img class="small-panel-pic" src="~assets/dashboard/overview06.png" alt="" />
|
||||
<div class="small-base">
|
||||
<div class="small-title">年发电量</div>
|
||||
<div class="small-value">
|
||||
<span class="content-number">{{realData.attributeMap.windfarmyearprodenergy}}</span>
|
||||
<span>kWh</span>
|
||||
</div>
|
||||
</div>
|
||||
</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.deviceCode}}</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="realAlert"
|
||||
ref="scrollRef"
|
||||
@mouseover.native="clearScroll"
|
||||
@mouseleave.native="createScroll">
|
||||
<p v-for="(item,index) in tableData"
|
||||
:key="index"
|
||||
@click="open(item)" >
|
||||
<span>{{item.deviceCode}}、</span>
|
||||
<span>{{item.eventText}}、</span>
|
||||
<span>{{item.eventTimeFormate}}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-scrollbar>
|
||||
@ -55,6 +148,17 @@ const realData = ref({
|
||||
attributeMap: {},
|
||||
})
|
||||
|
||||
const attributeList = ref({
|
||||
attributesList:[
|
||||
'windfarmactivepower',
|
||||
'windfarmreactivepower',
|
||||
'windfarmavgwindspeed',
|
||||
'windfarmdayprodenergy',
|
||||
'windfarmmonthprodenergy',
|
||||
'windfarmyearprodenergy',
|
||||
]
|
||||
})
|
||||
|
||||
const formatAttributeValue = (value: any) => {
|
||||
if (value === undefined) {
|
||||
return '-'
|
||||
@ -65,27 +169,23 @@ const formatAttributeValue = (value: any) => {
|
||||
return value % 1 === 0 ? value : value.toFixed(2)
|
||||
}
|
||||
const overviewList = () => {
|
||||
getWindFarmRealData().then((res) => {
|
||||
getWindFarmRealData(attributeList.value).then((res) => {
|
||||
if (res.code == 200) {
|
||||
res.data.attributeMap.windfarmactivepower = formatAttributeValue(res.data.attributeMap.windfarmactivepower)
|
||||
res.data.attributeMap.windfarmreactivepower = formatAttributeValue(res.data.attributeMap.windfarmreactivepower)
|
||||
res.data.attributeMap.windfarmavgwindspeed = formatAttributeValue(res.data.attributeMap.windfarmavgwindspeed)
|
||||
res.data.attributeMap.windfarmdayprodenergy = formatAttributeValue(res.data.attributeMap.windfarmdayprodenergy)
|
||||
res.data.attributeMap.windfarmmonthprodenergy = formatAttributeValue(res.data.attributeMap.windfarmmonthprodenergy)
|
||||
res.data.attributeMap.windfarmactivepower = formatAttributeValue(res.data.attributeMap.windfarmactivepower)
|
||||
res.data.attributeMap.windfarmavgwindspeed = formatAttributeValue(res.data.attributeMap.windfarmavgwindspeed)
|
||||
res.data.attributeMap.windfarmdayoperationhours = formatAttributeValue(res.data.attributeMap.windfarmdayoperationhours)
|
||||
res.data.attributeMap.windfarmmonthoperationhours = formatAttributeValue(res.data.attributeMap.windfarmmonthoperationhours)
|
||||
res.data.attributeMap.windfarmyearprodenergy = formatAttributeValue(res.data.attributeMap.windfarmyearprodenergy)
|
||||
res.data.attributeMap.windfarmtotalprodenergy = formatAttributeValue(res.data.attributeMap.windfarmtotalprodenergy)
|
||||
const data: any = {
|
||||
windFarmId: res.data.windFarmId,
|
||||
attributeMap: {
|
||||
windfarmactivepower: res.data.attributeMap.windfarmactivepower,
|
||||
windfarmreactivepower: res.data.attributeMap.windfarmreactivepower,
|
||||
windfarmavgwindspeed: res.data.attributeMap.windfarmavgwindspeed,
|
||||
windfarmdayprodenergy: res.data.attributeMap.windfarmdayprodenergy,
|
||||
windfarmmonthprodenergy: res.data.attributeMap.windfarmmonthprodenergy,
|
||||
windfarmactivepower: res.data.attributeMap.windfarmactivepower,
|
||||
windfarmavgwindspeed: res.data.attributeMap.windfarmavgwindspeed,
|
||||
windfarmdayoperationhours: res.data.attributeMap.windfarmdayoperationhours,
|
||||
windfarmmonthoperationhours: res.data.attributeMap.windfarmmonthoperationhours,
|
||||
windfarmyearprodenergy: res.data.attributeMap.windfarmyearprodenergy,
|
||||
windfarmtotalprodenergy: res.data.attributeMap.windfarmtotalprodenergy,
|
||||
windfarmyearprodenergy: res.data.attributeMap.windfarmyearprodenergy
|
||||
},
|
||||
}
|
||||
|
||||
@ -126,19 +226,19 @@ const StatusListData = () => {
|
||||
item.attributeMap.iwindspeed !== undefined
|
||||
? item.attributeMap.iwindspeed % 1 === 0
|
||||
? item.attributeMap.iwindspeed
|
||||
: item.attributeMap.iwindspeed.toFixed(1)
|
||||
: item.attributeMap.iwindspeed.toFixed(2)
|
||||
: '--'
|
||||
item.attributeMap.igenpower =
|
||||
item.attributeMap.igenpower !== undefined
|
||||
? item.attributeMap.igenpower % 1 === 0
|
||||
? item.attributeMap.igenpower
|
||||
: item.attributeMap.igenpower.toFixed(1)
|
||||
: item.attributeMap.igenpower.toFixed(2)
|
||||
: '--'
|
||||
item.attributeMap.ikwhthisday =
|
||||
item.attributeMap.ikwhthisday !== undefined
|
||||
? item.attributeMap.ikwhthisday % 1 === 0
|
||||
? item.attributeMap.ikwhthisday
|
||||
: item.attributeMap.ikwhthisday.toFixed(1)
|
||||
: item.attributeMap.ikwhthisday.toFixed(2)
|
||||
: '--'
|
||||
// 初始化计数器和累加器
|
||||
if (index === 0) {
|
||||
@ -242,15 +342,12 @@ const timestampToTime = (timestamp: any) => {
|
||||
const tableData = ref()
|
||||
|
||||
const getTableData = (deviceCode) => {
|
||||
const today = new Date()
|
||||
const threeDaysAgo = new Date(today)
|
||||
threeDaysAgo.setDate(today.getDate() - 3)
|
||||
const startTime = threeDaysAgo.getTime()
|
||||
const data: any = {
|
||||
startTime: startTime,
|
||||
startTime: new Date(new Date().toLocaleDateString()).getTime(),
|
||||
endTime: Date.now(),
|
||||
deviceCode: deviceCode,
|
||||
limit: 100,
|
||||
eventLevel:2
|
||||
}
|
||||
console.log(JSON.stringify(data))
|
||||
getAlarmListReq(data).then((res) => {
|
||||
@ -308,6 +405,13 @@ const okSubmit = (val: any) => {
|
||||
}
|
||||
|
||||
const scrollRef=ref()
|
||||
const showConfirmButton = ref(false)
|
||||
const showButton = () => {
|
||||
showConfirmButton.value = true;
|
||||
}
|
||||
const hideButton = () => {
|
||||
showConfirmButton.value = false;
|
||||
}
|
||||
const clearScroll = () => {
|
||||
clearInterval(timer)
|
||||
}
|
||||
@ -350,12 +454,12 @@ const computedHeight = reactive({
|
||||
const sizeChange = () => {
|
||||
const rect = HomeHight.value?.getBoundingClientRect()
|
||||
if (!rect) return
|
||||
computedHeight.powerHeight = rect.height - 630 + 'px'
|
||||
computedHeight.alarmHeight = rect.height - 5 + 'px'
|
||||
computedHeight.centerHeight = rect.height - 0 + 'px'
|
||||
computedHeight.centerHeight = rect.height - 190 + 'px'
|
||||
if (window.screen.width < 1360) {
|
||||
computedHeight.alarmHeight = '300px'
|
||||
computedHeight.powerHeight = '200px'
|
||||
computedHeight.centerHeight = rect.height - 0 + 'px'
|
||||
}
|
||||
if (rect.width < 1360) {
|
||||
computedHeight.centerHeight = rect.height - 0 + 'px'
|
||||
}
|
||||
}
|
||||
|
||||
@ -364,7 +468,7 @@ onMounted(() => {
|
||||
sizeChange()
|
||||
//getAllChartData()
|
||||
createScroll()
|
||||
// overviewList()
|
||||
overviewList()
|
||||
StatusListData()
|
||||
autoUpdate()
|
||||
|
||||
@ -424,7 +528,7 @@ $labelHeight: 30px;
|
||||
}
|
||||
.content-number {
|
||||
color: #333333;
|
||||
font-size: 20px;
|
||||
font-size: 28px;
|
||||
}
|
||||
.homelabel {
|
||||
font-family: PingFangSC-Semibold;
|
||||
@ -436,6 +540,54 @@ $labelHeight: 30px;
|
||||
margin-bottom: 10px;
|
||||
display: block;
|
||||
}
|
||||
.overview {
|
||||
width: calc(100% - 10px);
|
||||
height: 100%;
|
||||
.overviewItem{
|
||||
height: 100px;
|
||||
display: flex;
|
||||
background: #FFFFFF;
|
||||
border-radius: 6px;
|
||||
margin: 5px;
|
||||
align-items: center;
|
||||
color: #4E5969;
|
||||
.small-panel-pic{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.grid-content {
|
||||
/* overflow-x: hidden;*/
|
||||
width: 100%;
|
||||
@ -446,80 +598,8 @@ $labelHeight: 30px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.overview {
|
||||
/* @include cardDefaultStyle;
|
||||
@include cardlabel;*/
|
||||
min-height: 216px;
|
||||
.small-panel {
|
||||
display: flex;
|
||||
border: 1px solid #e1edf6;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
.small-panel-pic {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
.small-base {
|
||||
word-break: keep-all;
|
||||
margin-left: 10px;
|
||||
color: #2c3f5d;
|
||||
}
|
||||
}
|
||||
}
|
||||
.status {
|
||||
/* @include cardDefaultStyle;
|
||||
@include cardlabel;*/
|
||||
min-height: 374px;
|
||||
.statusrow {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.status-con {
|
||||
padding-left: 20px !important;
|
||||
background: #f0f6ff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.status-panel {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
font-size: 12px;
|
||||
.status-panel-pic {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
.status-base-main {
|
||||
word-break: keep-all;
|
||||
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: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.power {
|
||||
@include cardDefaultStyle;
|
||||
@include cardlabel;
|
||||
width: 100%;
|
||||
min-height: 290px;
|
||||
height: v-bind('computedHeight.powerHeight');
|
||||
.chartBox {
|
||||
height: calc(100% - $labelHeight);
|
||||
.power-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.matrix {
|
||||
@include cardlabel;
|
||||
background: url('/@/assets/dashboard/bg1.png') no-repeat #ffffff;
|
||||
@ -537,113 +617,7 @@ $labelHeight: 30px;
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
.realAlert{
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
line-height: 30px;
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
p{
|
||||
padding-right: 30px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.summarize {
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
background-color: #fff;
|
||||
margin-bottom: 20px;
|
||||
word-break: keep-all;
|
||||
@include cardlabel;
|
||||
min-height: 224px;
|
||||
.summarize-panel-list {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.summarize-panel {
|
||||
margin: 5px;
|
||||
width: 25%;
|
||||
display: flex;
|
||||
padding: 20px 0;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: #f0f6ff;
|
||||
border-radius: 10px;
|
||||
.summarize-panel-base {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
color: rgb(78, 89, 105);
|
||||
.content-number {
|
||||
color: #333333;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.trend {
|
||||
min-height: 300px;
|
||||
height: 335px;
|
||||
overflow: hidden;
|
||||
.trend-tabs {
|
||||
:deep(.el-tabs__item) {
|
||||
border: none;
|
||||
text-align: center;
|
||||
width: 40px;
|
||||
padding: 0;
|
||||
line-height: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
:deep(.el-tabs__header .el-tabs__nav) {
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
}
|
||||
:deep(.el-tabs__header) {
|
||||
border-bottom: 0;
|
||||
float: right;
|
||||
margin-top: -43px;
|
||||
}
|
||||
:deep(.el-tabs__content) {
|
||||
clear: both;
|
||||
}
|
||||
:deep(.el-tabs__item.is-active) {
|
||||
background: rgba(2, 119, 179, 0.2);
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
}
|
||||
:deep(.el-tabs__nav-wrap:after) {
|
||||
background: none;
|
||||
}
|
||||
:deep(.el-tabs__active-bar) {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
.trend-chart {
|
||||
width: 100%;
|
||||
height: 260px;
|
||||
}
|
||||
}
|
||||
.realPart {
|
||||
height: v-bind('computedHeight.alarmHeight');
|
||||
.realAlert{
|
||||
height: calc(100% - 20px);
|
||||
overflow: hidden;
|
||||
ul li{
|
||||
list-style: none;
|
||||
line-height: 30px;
|
||||
border-bottom: 1px #dddddd dashed;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="FanList-content">
|
||||
<el-row :gutter="10">
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="4" v-for="(item, index) in props.parentData" style="margin-bottom: 5px">
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="3" v-for="(item, index) in props.parentData" style="margin-bottom: 5px">
|
||||
<div class="grid-content ep-bg-purple" @dblclick="handleDoubleClick(item)">
|
||||
<div class="FanList-panel" :class="item.standard == true ? 'wind-mark' : 'wind-default'">
|
||||
<div class="fanlist-top">
|
||||
@ -42,9 +42,6 @@
|
||||
<div class="leaf_3"><img src="~assets/dashboard/leaf1.png" alt="" /></div>
|
||||
</div>
|
||||
</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>
|
||||
<div class="fanlist-pic">
|
||||
<img src="~assets/dashboard/fanlist2.png" alt="" />
|
||||
@ -52,33 +49,22 @@
|
||||
</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 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>MW</span>
|
||||
<span class="content-number">{{ item.attributeMap.igenpower }}</span>
|
||||
<span>MW</span>
|
||||
</div>
|
||||
<div class="fanlist-text">
|
||||
<span class="content-number">{{ item.attributeMap.ikwhthisday }}</span><span>kWh</span>
|
||||
</div>-->
|
||||
<el-col :span="8">
|
||||
<div class="fanlist-text">
|
||||
<span class="content-number">{{ item.attributeMap.iwindspeed }}</span><span>风速m/s</span>
|
||||
<span class="content-number">{{ item.attributeMap.ikwhthisday }}</span>
|
||||
<span>kWh</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<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.attributeMap.ikwhthisday }}</span><span>日发电量kWh</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="fanlist-bottom">
|
||||
<!-- <el-tag class="tag-panel is-danger">已锁定</el-tag>-->
|
||||
<el-tag v-if="item.attributeMap.locked === 1" class="tag-panel is-danger">已锁定</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
@ -109,7 +95,14 @@ const getAnimationStyle = (item) => {
|
||||
'animation-timing-function': 'linear',
|
||||
'animation-iteration-count': 'infinite',
|
||||
'animation-direction': 'normaL',
|
||||
//'animation-fill-mode': 'forwards'
|
||||
}
|
||||
/* const animationDuration = 60 / irotorspeed
|
||||
const iterationCount = Math.floor(10) // 迭代次数取整
|
||||
return {
|
||||
'animation': `leafRotate ${animationDuration}s ${iterationCount}`
|
||||
}*/
|
||||
|
||||
}
|
||||
|
||||
const handleDoubleClick = (row) => {
|
||||
@ -241,7 +234,7 @@ const handleDoubleClick = (row) => {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
/*padding: 10px;*/
|
||||
padding: 10px 10px 0 10px;
|
||||
padding: 5px 10px 0 10px;
|
||||
text-align: center;
|
||||
.fanlist-pic {
|
||||
display: flex;
|
||||
@ -299,12 +292,13 @@ const handleDoubleClick = (row) => {
|
||||
}
|
||||
}
|
||||
.fanlist-text {
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 5px;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
.content-number {
|
||||
color: #333333;
|
||||
font-size: 20px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
.fanlist-text span {
|
||||
@ -315,7 +309,6 @@ const handleDoubleClick = (row) => {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
height: 24px;
|
||||
margin-top: -7px;
|
||||
.tag-panel {
|
||||
border-radius: 0 0 8px 0;
|
||||
line-height: 20px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user