<template>
<div class="parcel-box">
<div class="title">
<el-select
size="mini"
:disabled="displayDetail"
v-model="company"
placeholder="请选择"
@change="handleCompanyChange(company)"
>
<el-option
v-for="item in companyOptions"
:key="item.id"
:label="item.aname"
:value="item.id"
>
</el-option>
</el-select>
<div class="tabCut">
<div
@click="tabClick(val.id)"
:class="[
tabIndex === val.id ? 'active' : '',
displayDetail ? 'disabled' : '',
]"
v-for="val in tabOptions"
:key="val.id"
>
<span>{{ val.name }}</span>
</div>
</div>
<div class="station">
场站：
<el-select
size="mini"
:disabled="displayDetail"
v-model="stationObj"
placeholder="请选择"
@change="handleStationChange(stationObj)"
clearable
>
<el-option
v-for="item in stationList"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
</div>
<div class="station">
开始日期
<div class="search-input">
<el-date-picker
:disabled="displayDetail"
v-model="starTime"
type="date"
value-format="YYYY-MM-DD"
placeholder="选择日期"
popper-class="date-select"
>
</el-date-picker>
</div>
</div>
<div class="station">
结束日期
<div class="search-input">
<el-date-picker
:disabled="displayDetail"
v-model="endTime"
type="date"
value-format="YYYY-MM-DD"
placeholder="选择日期"
popper-class="date-select"
>
</el-date-picker>
</div>
</div>
<div class="but">
<el-button
round
size="mini"
class="buttons"
:disabled="displayDetail"
@click="gerCndb"
>搜索</el-button
>
<el-button
round
size="mini"
class="buttons"
@click="dbfx"
:disabled="
chooseList.length <= 5 && chooseList.length > 1 ? false : true
"
>对标分析</el-button
>
<el-button
round
size="mini"
class="buttons"
@click="goBack"
v-if="displayDetail"
>返回</el-button
>
<el-button round size="mini" class="buttons" @click="funthb"
>同环比</el-button
>
<!-- <el-button round size="mini" class="buttons">导出</el-button> -->
</div>
</div>
<div class="bodys" v-if="!displayDetail">
<div class="line">
<div class="leftContent"><span>场内对标</span></div>
<div class="rightContent"></div>
</div>
<div class="economicTable" :style="{ height: echartsHeight }">
<el-table
:data="tableData"
ref="multipleTable"
size="mini"
:height="echartsHeight"
:cell-style="{ padding: '4px' }"
:row-style="{ height: '0' }"
stripe
@selection-change="handleCurrentChange"
>
<el-table-column type="selection" width="60" align="center">
</el-table-column>
<el-table-column
align="center"
prop="zhpm"
show-overflow-tooltip
label="综合排名"
width="80"
sortable
>
</el-table-column>
<el-table-column
align="center"
show-overflow-tooltip
prop="date"
label="日期"
sortable
width="100"
>
</el-table-column>
<el-table-column
align="center"
show-overflow-tooltip
prop="fdlpm"
label="发电量排名"
sortable
width="65"
>
</el-table-column>
<el-table-column
align="center"
show-overflow-tooltip
prop="fdl"
label="发电量"
sortable
width="65"
>
</el-table-column>
<el-table-column
align="center"
show-overflow-tooltip
prop="gzssdlpm"
label="故障损失排名"
sortable
width="65"
>
</el-table-column>
<el-table-column
align="center"
show-overflow-tooltip
prop="gzssdl"
label="故障损失"
sortable
width="65"
>
</el-table-column>
<el-table-column
align="center"
show-overflow-tooltip
prop="jxssdlpm"
label="检修损失排名"
sortable
width="65"
>
</el-table-column>
<el-table-column
align="center"
show-overflow-tooltip
prop="jxssdl"
label="检修损失"
sortable
width="65"
>
</el-table-column>
<el-table-column
align="center"
show-overflow-tooltip
prop="xnssdlpm"
label="性能损失排名"
sortable
width="65"
>
</el-table-column>
<el-table-column
align="center"
show-overflow-tooltip
prop="xnssdl"
label="性能损失"
sortable
width="65"
>
</el-table-column>
<el-table-column
align="center"
show-overflow-tooltip
prop="xdssdlpm"
label="限电损失排名"
sortable
width="65"
>
</el-table-column>
<el-table-column
align="center"
show-overflow-tooltip
prop="xdssdl"
label="限电损失"
sortable
width="65"
>
</el-table-column>
<el-table-column
align="center"
show-overflow-tooltip
prop="slssdlpm"
label="受累损失排名"
sortable
width="65"
>
</el-table-column>
<el-table-column
align="center"
show-overflow-tooltip
prop="slssdl"
label="受累损失"
sortable
width="65"
>
</el-table-column>
<el-table-column
align="center"
show-overflow-tooltip
prop="fnlylpm"
:label="(tabIndex === -1 ? '风能' : '光能') + '利用率排名'"
sortable
width="65"
>
</el-table-column>
<el-table-column
align="center"
show-overflow-tooltip
prop="fnlyl"
:label="(tabIndex === -1 ? '风能' : '光能') + '利用率(%)'"
sortable
width="65"
>
</el-table-column>
<el-table-column
align="center"
show-overflow-tooltip
prop="gzsslpm"
label="故障损失率排名"
sortable
width="65"
>
</el-table-column>
<el-table-column
align="center"
prop="gzssl"
show-overflow-tooltip
label="故障损失率(%)"
sortable
width="65"
>
</el-table-column>
<el-table-column
align="center"
prop="jxsslpm"
show-overflow-tooltip
label="检修损失率排名"
sortable
width="65"
>
</el-table-column>
<el-table-column
align="center"
prop="jxssl"
show-overflow-tooltip
label="检修损失率(%)"
sortable
width="65"
>
</el-table-column>
<el-table-column
align="center"
prop="qflpm"
show-overflow-tooltip
:label="'弃' + (tabIndex === -1 ? '风' : '光') + '率排名'"
sortable
width="65"
>
</el-table-column>
<el-table-column
align="center"
prop="qfl"
show-overflow-tooltip
:label="'弃' + (tabIndex === -1 ? '风' : '光') + '率(%)'"
sortable
width="65"
>
</el-table-column>
<el-table-column
align="center"
prop="xnsslpm"
show-overflow-tooltip
label="性能损失率排名"
sortable
width="65"
>
</el-table-column>
<el-table-column
align="center"
prop="xnssl"
show-overflow-tooltip
label="性能损失率(%)"
sortable
width="65"
>
</el-table-column>
<el-table-column
align="center"
prop="slsslpm"
show-overflow-tooltip
label="受累损失率排名"
sortable
width="65"
>
</el-table-column>
<el-table-column
align="center"
prop="slssl"
show-overflow-tooltip
label="受累损失率(%)"
sortable
width="65"
>
</el-table-column>
<el-table-column align="center" prop="" label="操作">
<template v-slot="scope">
<span
@click="goDetail(scope.row)"
style="cursor: pointer; color: #05bb4c"
>详情</span
>
</template>
</el-table-column>
</el-table>
<div class="pagination-class">
<el-pagination
@current-change="handlePageChange"
:current-page="page.currentPage"
:page-size="page.pagesize"
layout="total, prev, pager, next, jumper"
:total="page.total"
>
</el-pagination>
</div>
</div>
</div>
<div class="echarts" v-if="!displayDetail">
<div class="pie-echarts">
<div class="chart-name">
<div class="point point-left bottom"></div>
<div class="point point-right bottom"></div>
损失电量分析
</div>
<PieChart
:lossPower="lossPower"
width="100%"
height="20vh"
:showLable="false"
></PieChart>
</div>
<div class="bar-echarts">
<div class="chart-name">
<div class="point point-left bottom"></div>
<div class="point point-right bottom"></div>
五项损失
</div>
<BarCharts
:list="barList"
width="100%"
height="29vh"
:showLegend="true"
:xdate="false"
:colorIndex="true"
></BarCharts>
</div>
</div>
<div v-if="displayDetail">
<el-table
:data="detailTable"
ref="multipleTable"
size="mini"
height="78vh"
:cell-style="{ padding: '0px' }"
:row-style="{ height: '0' }"
stripe
@selection-change="handleCurrentChange"
>
<el-table-column type="selection" width="60" align="center">
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
prop="name"
label="风机名称"
width="150"
sortable
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
prop="zhpm"
label="综合排名"
sortable
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
prop="gzssdl"
label="故障损失"
sortable
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
prop="jxssdlpm"
label="检修损失排名"
sortable
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
prop="jxssdl"
label="检修损失"
sortable
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
prop="xnssdlpm"
label="性能损失排名"
sortable
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
prop="xnssdl"
label="性能损失"
sortable
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
prop="xdssdlpm"
label="限电损失排名"
sortable
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
prop="xdssdl"
label="限电损失"
sortable
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
prop="slssdlpm"
label="受累损失排名"
sortable
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
prop="slssdl"
label="受累损失"
sortable
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
prop="gzsslpm"
label="故障损失率排名"
sortable
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
prop="gzssl"
label="故障损失率(%)"
sortable
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
prop="jxsslpm"
label="检修损失率排名"
sortable
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
prop="jxssl"
label="检修损失率(%)"
sortable
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
prop="qflpm"
:label="'弃' + (tabIndex === -1 ? '风' : '光') + '率排名'"
sortable
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
prop="qfl"
:label="'弃' + (tabIndex === -1 ? '风' : '光') + '率(%)'"
sortable
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
prop="xnsslpm"
label="性能损失率排名"
sortable
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
prop="xnssl"
label="性能损失率(%)"
sortable
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
prop="slsslpm"
label="受累损失率排名"
sortable
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
prop="slssl"
label="受累损失率(%)"
sortable
>
</el-table-column>
</el-table>
<div class="pagination-class">
<el-pagination
@current-change="handlePageDChange"
:current-page="pageD.currentPage"
:page-size="pageD.pagesize"
layout="total, prev, pager, next, jumper"
:total="pageD.total"
>
</el-pagination>
</div>
</div>
<el-dialog
class="dialogs"
width="90%"
top="40px"
v-model="dialogVisible"
:show-close="true"
>
<template #title>
<div class="dialog-title">
<img class="dialog-title-img" src="@assets/imgs/dialog-title.png" />
<div class="title">对标排名分析</div>
</div>
</template>
<div class="dialog-body">
<img class="dialog-img" src="@assets/imgs/dialog.png" />
<dayinfo
:radarValue="radarValue"
:title="[windNum, windNum2]"
:windNum="windNum"
:windNum2="windNum2"
:windNum3="windNum3"
:windNum4="windNum4"
:windNum5="windNum5"
:tabs="tabs"
:analyisDialog="analyisDialog"
/>
</div>
</el-dialog>
<el-dialog
class="dialogs"
width="94%"
top="40px"
v-model="thbVisible"
:show-close="true"
>
<template #title>
<div class="dialog-title">
<img class="dialog-title-img" src="@assets/imgs/dialog-title.png" />
<div class="title">同环比分析</div>
</div>
</template>
<div class="dialog-body">
<img class="dialog-img" src="@assets/imgs/dialog.png" />
<div class="economicTable" :style="{ height: echartsHeight }">
<el-table
:data="thbData"
ref="multipleTable1"
size="mini"
:height="echartsHeight"
:cell-style="{ padding: '4px' }"
:row-style="{ height: '0' }"
stripe
>
<el-table-column
show-overflow-tooltip
align="center"
label-class-name="s-tb-th"
prop="zhpm"
label="综合排名"
minWidth="80"
sortable
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
label-class-name="s-tb-th"
prop="name"
label="类型"
sortable
minWidth="100"
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
label-class-name="s-tb-th"
prop="fdlpm"
label="发电量排名"
sortable
minWidth="65"
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
label-class-name="s-tb-th"
prop="fdl"
label="发电量"
sortable
minWidth="65"
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
label-class-name="s-tb-th"
prop="gzssdlpm"
label="故障损失排名"
sortable
minWidth="65"
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
label-class-name="s-tb-th"
prop="gzssdl"
label="故障损失"
sortable
minWidth="65"
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
label-class-name="s-tb-th"
prop="jxssdlpm"
label="检修损失排名"
sortable
minWidth="65"
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
label-class-name="s-tb-th"
prop="jxssdl"
label="检修损失"
sortable
minWidth="65"
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
label-class-name="s-tb-th"
prop="xnssdlpm"
label="性能损失排名"
sortable
minWidth="65"
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
label-class-name="s-tb-th"
prop="xnssdl"
label="性能损失"
sortable
minWidth="65"
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
label-class-name="s-tb-th"
prop="xdssdlpm"
label="限电损失排名"
sortable
minWidth="65"
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
label-class-name="s-tb-th"
prop="xdssdl"
label="限电损失"
sortable
minWidth="65"
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
label-class-name="s-tb-th"
prop="slssdlpm"
label="受累损失排名"
sortable
minWidth="65"
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
label-class-name="s-tb-th"
prop="slssdl"
label="受累损失"
sortable
minWidth="65"
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
label-class-name="s-tb-th"
prop="fnlylpm"
:label="(tabIndex === -1 ? '风能' : '光能') + '利用率排名'"
sortable
minWidth="65"
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
label-class-name="s-tb-th"
prop="fnlyl"
:label="(tabIndex === -1 ? '风能' : '光能') + '利用率(%)'"
sortable
minWidth="65"
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
label-class-name="s-tb-th"
prop="gzsslpm"
label="故障损失率排名"
sortable
minWidth="65"
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
label-class-name="s-tb-th"
prop="gzssl"
label="故障损失率(%)"
sortable
minWidth="65"
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
label-class-name="s-tb-th"
prop="jxsslpm"
label="检修损失率排名"
sortable
minWidth="65"
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
label-class-name="s-tb-th"
prop="jxssl"
label="检修损失率(%)"
sortable
minWidth="65"
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
label-class-name="s-tb-th"
prop="qflpm"
:label="'弃' + (tabIndex === -1 ? '风' : '光') + '率排名'"
sortable
minWidth="65"
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
label-class-name="s-tb-th"
prop="qfl"
:label="'弃' + (tabIndex === -1 ? '风' : '光') + '率(%)'"
sortable
minWidth="65"
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
label-class-name="s-tb-th"
prop="xnsslpm"
label="性能损失率排名"
sortable
minWidth="65"
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
label-class-name="s-tb-th"
prop="xnssl"
label="性能损失率(%)"
sortable
minWidth="65"
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
label-class-name="s-tb-th"
prop="slsslpm"
label="受累损失率排名"
sortable
minWidth="65"
>
</el-table-column>
<el-table-column
show-overflow-tooltip
align="center"
label-class-name="s-tb-th"
prop="slssl"
label="受累损失率(%)"
sortable
minWidth="65"
>
</el-table-column>
</el-table>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import dayjs from "dayjs";
import { companys } from "@/api/curveAnalyse";
import { getStation, cndb, thb, details } from "@/api/performance";
import PieChart from "../../homePage/components/pieChart.vue";
import BarCharts from "../../homePage/components/barCharts.vue";
import dayinfo from "../compontent/dayinfo.vue";
export default {
name: "siteBenchmarking", //场内对标
components: {
PieChart,
BarCharts,
dayinfo,
},
data() {
return {
page: {
pagesize: 10,
currentPage: 1,
total: 0,
},
pageD: {
pagesize: 18,
currentPage: 1,
total: 0,
},
company: "",
companyOptions: [],
stationObj: "",
stationList: [],
starTime: "",
endTime: "",
tabIndex: -1,
tabOptions: [
{ id: -1, name: "风电" },
{ id: -2, name: "光伏" },
],
tableData: [],
detailTable: [],
chooseList: [],
lossPower: [],
barList: [],
displayDetail: false,
dialogVisible: false,
radarValue: [],
windNum: "",
windNum2: "",
windNum3: "",
windNum4: "",
windNum5: "",
tabs: [],
analyisDialog: [],
screenHeight: window.innerHeight,
echartsHeight: "53vh",
//同环比
thbVisible: false,
thbData: [],
};
},
created() {
// let date = new Date();
// date.setDate(1);
// let month = parseInt(date.getMonth() + 1);
// let day = date.getDate();
// if (month < 10) {
// month = '0' + month;
// }
// if (day < 10) {
// day = '0' + day;
// }
// this.starTime = date.getFullYear() + '-' + month + '-' + day;
this.starTime = dayjs(new Date().getTime() - 60000 * 60 * 24 * 7).format(
"YYYY-MM-DD"
);
this.endTime = dayjs(new Date().getTime()).format("YYYY-MM-DD");
this.initialization();
},
mounted() {
if (this.screenHeight > 1100) {
this.echartsHeight = "56vh";
} else {
this.echartsHeight = "53vh";
}
window.onresize = () => {
return (() => {
window.screenHeight = window.innerHeight;
this.screenHeight = window.screenHeight;
})();
};
},
methods: {
handlePageChange(val) {
this.page.currentPage = val;
this.gerCndb();
},
handlePageDChange(val) {
this.pageD.currentPage = val;
this.goDetail();
},
funthb() {
thb({
companys: this.company,
type: this.tabIndex,
// beginDate: this.starTime,
// endDate: this.endTime,
pageNum: 1,
pageSize: 10,
wpids: this.stationObj,
}).then(({ data: res }) => {
if (res.data) {
this.thbData = res.data;
this.thbVisible = true;
}
});
},
tabClick(val) {
this.tabIndex = val;
this.getStation(this.company);
this.gerCndb();
// this.initialization();
},
initialization() {
companys().then(({ data: res }) => {
if (res.data) {
this.company = res.data[0].id;
this.companyOptions = res.data;
this.getStation(res.data[0].id);
}
});
},
getStation(companyids) {
getStation({
companyids: companyids,
type: this.tabIndex,
}).then(({ data: res }) => {
if (res.data.length) {
this.stationList = res.data;
this.stationObj = res.data[0].id;
this.gerCndb();
} else {
this.stationList = [];
this.stationObj = "";
this.gerCndb();
}
});
},
gerCndb() {
cndb({
companys: this.company,
type: this.tabIndex,
beginDate: this.starTime,
endDate: this.endTime,
wpids: this.stationObj,
pageSize: this.page.pagesize,
pageNum: this.page.currentPage,
target: "",
sort: "",
}).then(({ data: res }) => {
if (res.data) {
let barList = [
{
name: "故障损失电量",
children: [],
date: [],
},
{
name: "检修损失电量",
children: [],
},
{
name: "性能损失电量",
children: [],
},
{
name: "限电损失电量",
children: [],
},
{
name: "受累损失电量",
children: [],
},
];
this.tableData = res.data.resultList;
this.page.total = res.data.total;
let lossPower = [];
res.data.resultList.forEach((item) => {
let obj = {
name: item.date,
value: item.zssdl,
};
lossPower.push(obj);
barList[0].date.push(item.date);
barList[0].children.push(item.gzssdl);
barList[1].children.push(item.jxssdl);
barList[2].children.push(item.xnssdl);
barList[3].children.push(item.xdssdl);
barList[4].children.push(item.slssdl);
});
this.lossPower = lossPower;
this.barList = barList;
}
});
},
handleStationChange(val) {
this.stationObj = val;
this.gerCndb();
},
handleCompanyChange(val) {
this.company = val;
this.getStation(val);
this.gerCndb();
},
handleCurrentChange(val) {
if (val.length > 5) {
let del_row = val.shift();
this.$refs.multipleTable.toggleRowSelection(del_row, false);
}
let arr = [];
val.forEach((item, index) => {
if (index < 5) {
arr.push(item);
}
});
this.chooseList = arr;
},
goDetail(row) {
this.displayDetail = true;
details({
id: this.stationObj,
beginDate: this.starTime,
endDate: this.endTime,
pageSize: this.pageD.pagesize,
pageNum: this.pageD.currentPage,
target: "",
sort: "",
}).then(({ data: res }) => {
if (res.data) {
this.detailTable = res.data.resultList;
this.pageD.total = res.data.total;
}
});
},
goBack() {
this.displayDetail = false;
},
dbfx() {
if (this.chooseList.length <= 5) {
this.dialogVisible = true;
this.AjaxDbfx();
}
},
AjaxDbfx() {
var data = this.chooseList;
this.windNum = data[0]?.date || data[0]?.name;
this.windNum2 = data[1]?.date || data[1]?.name;
this.windNum3 = data[2]?.date || data[2]?.name;
this.windNum4 = data[3]?.date || data[3]?.name;
this.windNum5 = data[4]?.date || data[4]?.name;
let tabs = [
{
name: "发电量",
code: "fdl",
},
{
name: "故障损失电量",
code: "gzssdl",
},
{
name: "检修损失电量",
code: "jxssdl",
},
{
name: "性能未达标损失电量",
code: "xnssdl",
},
{
name: "受累损失电量",
code: "slssdl",
},
{
name: "风能利用率",
code: "fnlyl",
},
{
name: "故障损失率",
code: "gzssl",
},
{
name: "检修损失率",
code: "jxssl",
},
{
name: "弃风率",
code: "qfl",
},
{
name: "性能损失率",
code: "xnssl",
},
{
name: "受累损失率",
code: "slssl",
},
];
tabs = tabs.map((item) => {
if (item.code == "fnlyl") {
if (this.tabIndex == -1) {
item.name = "风能利用率";
} else {
item.name = "光能利用率";
}
}
if (item.code == "qfl") {
if (this.tabIndex == -1) {
item.name = "弃风率";
} else {
item.name = "弃光率";
}
}
return item;
});
tabs.forEach((val) => {
data.forEach((item, index) => {
val["windData" + (index + 1)] = item[val.code];
});
});
this.tabs = tabs;
let radarValue = [];
data.forEach((item, index) => {
let data = {
indicator: [
"风能利用率排名",
"故障损失率排名",
"检修损失率排名",
"弃风率排名",
"性能损失率排名",
"受累损失率排名",
],
data: [
{
value: [
item.fnlylpm,
item.gzsslpm,
item.jxsslpm,
item.qflpm,
item.xnsslpm,
item.slsslpm,
],
name: item.name,
},
],
};
if (this.tabIndex == -1) {
data.indicator = [
"风能利用率排名",
"故障损失率排名",
"检修损失率排名",
"弃风率排名",
"性能损失率排名",
"受累损失率排名",
];
} else {
data.indicator = [
"光能利用率排名",
"故障损失率排名",
"检修损失率排名",
"弃光率排名",
"性能损失率排名",
"受累损失率排名",
];
}
radarValue.push(data);
});
this.radarValue = radarValue;
var analyis = [],
gzssdl = [],
jxssdl = [],
xnssdl = [],
xdssdl = [],
slssdl = [];
data.forEach((item, index) => {
gzssdl.push({
text: item.date || item.name,
value: item.gzssdl,
});
jxssdl.push({
text: item.date || item.name,
value: item.jxssdl,
});
xnssdl.push({
text: item.date || item.name,
value: item.xnssdl,
});
xdssdl.push({
text: item.date || item.name,
value: item.xdssdl,
});
slssdl.push({
text: item.date || item.name,
value: item.slssdl,
});
});
analyis.push(
{
title: "故障损失电量",
yAxisIndex: 0,
value: gzssdl,
},
{
title: "检修损失电量",
yAxisIndex: 0,
value: jxssdl,
},
{
title: "性能损失电量",
yAxisIndex: 0,
value: xnssdl,
},
{
title: "限电损失电量",
yAxisIndex: 0,
value: xdssdl,
},
{
title: "受累损失电量",
yAxisIndex: 0,
value: slssdl,
}
);
this.analyisDialog = analyis;
},
},
watch: {
screenHeight(val) {
this.screenHeight = val;
if (val > 1100) {
this.echartsHeight = "58vh";
} else {
this.echartsHeight = "55vh";
}
},
},
};
</script>
<style lang="less" scoped>
.pagination-class {
text-align: right;
}
.parcel-box {
padding: 0 15px;
}
/deep/ .s-tb-th {
height: 50px;
}
.title {
display: flex;
flex-direction: row;
align-items: center;
margin-top: 10px;
margin-bottom: 10px;
.tabCut {
display: inline-block;
margin: 0 10px;
div {
display: inline-block;
width: 60px;
height: 27px;
border: 1px solid #274934;
text-align: center;
line-height: 25px;
cursor: pointer;
}
div:nth-child(1) {
border-radius: 13px 0px 0px 13px;
border-right-width: 0;
}
div:nth-child(2) {
border-radius: 0px 13px 13px 0px;
}
.active {
background-color: rgba(5, 187, 76, 0.9);
color: #fff;
}
.disabled {
cursor: not-allowed;
pointer-events: none;
}
}
.tabCut1 {
display: inline-block;
margin: 0 10px;
div {
display: inline-block;
width: 60px;
height: 27px;
border: 1px solid #274934;
text-align: center;
line-height: 25px;
cursor: pointer;
}
div:nth-child(1) {
border-radius: 13px 0px 0px 13px;
}
div:nth-child(3) {
border-radius: 0px 13px 13px 0px;
}
.active {
background-color: rgba(5, 187, 76, 0.9);
color: #fff;
}
}
.station {
display: flex;
flex-direction: row;
align-items: center;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #b3b3b3;
margin-right: 10px;
}
.search-input {
margin-left: 10px;
}
.but {
display: flex;
flex-direction: row;
align-content: center;
margin-left: 20px;
}
.buttons {
background-color: rgba(5, 187, 76, 0.2);
border: 1px solid #3b6c53;
color: #b3b3b3;
font-size: 14px;
&:hover {
background-color: rgba(5, 187, 76, 0.5);
color: #ffffff;
}
}
}
.bodys {
width: 100%;
background-color: rgba(0, 0, 0, 0.45);
padding: 5px;
padding-bottom: 33px;
border-radius: 5px;
}
.line {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
padding-bottom: 5px;
.leftContent {
width: 242px;
height: 41px;
display: flex;
align-items: center;
background: url("../../../../assets/imgs/title_left_bg.png");
span {
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #ffffff;
margin-left: 25px;
}
}
.rightContent {
width: 212px;
height: 28px;
margin-top: 13px;
background: url("../../../../assets/imgs/title_right_bg.png");
}
}
.economicTable {
width: 100%;
}
.echarts {
width: 100%;
height: 26vh;
display: flex;
flex-direction: row;
align-items: center;
.chart-name {
display: flex;
align-items: center;
padding-left: 20px;
position: relative;
height: 39px;
width: 98%;
margin-left: 1%;
border-bottom: 1px solid rgba(153, 153, 153, 0.5);
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #ffffff;
}
.pie-echarts {
width: 30%;
height: 100%;
background: rgba(0, 0, 0, 0.45);
border-radius: 5px;
}
.bar-echarts {
width: 69%;
margin-left: 1%;
height: 100%;
background: rgba(0, 0, 0, 0.45);
border-radius: 5px;
}
}
.point {
width: 6px;
height: 1px;
background-color: #ffffff;
position: absolute;
&.point-left {
left: 0;
}
&.point-right {
right: 0;
}
&.top {
top: -1px;
}
&.bottom {
bottom: -1px;
}
}
/*去除表头全选框*/
::v-deep .el-table__header-wrapper .el-checkbox {
display: none;
}
::v-deep .el-table__body-wrapper .el-checkbox {
.el-checkbox__input {
display: block;
}
}
</style>