|
|
@@ -0,0 +1,963 @@
|
|
|
+<template>
|
|
|
+ <div class="parcel-box">
|
|
|
+ <div class="form-wrapper">
|
|
|
+ <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"
|
|
|
+ multiple
|
|
|
+ collapse-tags
|
|
|
+ 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
|
|
|
+ v-model="starTime"
|
|
|
+ :disabled="displayDetail"
|
|
|
+ type="date"
|
|
|
+ size="mini"
|
|
|
+ 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
|
|
|
+ v-model="endTime"
|
|
|
+ :disabled="displayDetail"
|
|
|
+ type="date"
|
|
|
+ size="mini"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ placeholder="选择日期"
|
|
|
+ popper-class="date-select"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="but">
|
|
|
+ <el-button
|
|
|
+ round
|
|
|
+ size="mini"
|
|
|
+ :disabled="displayDetail"
|
|
|
+ class="buttons"
|
|
|
+ @click="gerCjdb"
|
|
|
+ >搜 索</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">导出</el-button> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bodys" v-if="!displayDetail">
|
|
|
+ <div class="line">
|
|
|
+ <div class="leftContent" :data-type="$store.state.moreSty"><span>性能对标</span></div>
|
|
|
+ </div>
|
|
|
+ <div class="economicTable" v-if="!displayDetail">
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ ref="multipleTable"
|
|
|
+ size="mini"
|
|
|
+ height="calc(100% - 39px)"
|
|
|
+ :cell-style="{ padding: '6px' }"
|
|
|
+ :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="名称"
|
|
|
+ sortable
|
|
|
+ >
|
|
|
+ <template v-slot="scope">
|
|
|
+ <span
|
|
|
+ @click="goDetail(scope.row)"
|
|
|
+ style="cursor: pointer;"
|
|
|
+ :style="$store.state.moreSty === 'greenSty' ? 'color: #05bb4c' : 'color: #67b9ff'"
|
|
|
+ >{{ scope.row.name }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ header-align="center"
|
|
|
+ :align="item.align ? item.align : 'center'"
|
|
|
+ v-for="item in tabIndex == -1 ? tableHeader : tableHeaderG"
|
|
|
+ :key="item.code"
|
|
|
+ :prop="item.code"
|
|
|
+ :label="item.name"
|
|
|
+ :width="item.name.length == 4 ? 55 : 68"
|
|
|
+ show-overflow-tooltip
|
|
|
+ sortable
|
|
|
+ />
|
|
|
+ </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 v-if="!displayDetail" class="echarts">
|
|
|
+ <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="calc(100% - 39px)"
|
|
|
+ :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="calc(100% - 39px)"
|
|
|
+ :showLegend="true"
|
|
|
+ :xdate="false"
|
|
|
+ :colorIndex="true"
|
|
|
+ ></BarCharts>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="displayDetail" style="height: calc(100% - 48px - 35px)">
|
|
|
+ <el-table
|
|
|
+ :data="detailTable"
|
|
|
+ ref="multipleTable"
|
|
|
+ size="mini"
|
|
|
+ height="100%"
|
|
|
+ :cell-style="{ padding: '6px' }"
|
|
|
+ :row-style="{ height: '4' }"
|
|
|
+ stripe
|
|
|
+ @selection-change="handleCurrentChange"
|
|
|
+ >
|
|
|
+ <el-table-column type="selection" width="60" align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ prop="name"
|
|
|
+ label="风机名称"
|
|
|
+ show-overflow-tooltip
|
|
|
+ sortable
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ v-for="item in tabIndex == -1
|
|
|
+ ? tableHeaderDetail
|
|
|
+ : tableHeaderGDetail"
|
|
|
+ :key="item.code"
|
|
|
+ :prop="item.code"
|
|
|
+ :label="item.name"
|
|
|
+ :width="item.name.length == 4 ? 58 : 88"
|
|
|
+ show-overflow-tooltip
|
|
|
+ header-align="center"
|
|
|
+ :align="item.align ? item.align : 'center'"
|
|
|
+ sortable
|
|
|
+ />
|
|
|
+ </el-table>
|
|
|
+ <div class="pagination-class">
|
|
|
+ <el-pagination
|
|
|
+ @current-change="handlePageDChange"
|
|
|
+ :current-page="pageD.currentPage"
|
|
|
+ :page-size="pageD.pagesize"
|
|
|
+ @size-change="handleSizeDChange"
|
|
|
+ :page-sizes="[19, 50, 100, 500]"
|
|
|
+ layout="total, sizes, 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">
|
|
|
+ <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, windNum3, windNum4, windNum5]"
|
|
|
+ :windNum="windNum"
|
|
|
+ :windNum2="windNum2"
|
|
|
+ :windNum3="windNum3"
|
|
|
+ :windNum4="windNum4"
|
|
|
+ :windNum5="windNum5"
|
|
|
+ :tabs="tabs"
|
|
|
+ :analyisDialog="analyisDialog"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import dayjs from "dayjs";
|
|
|
+import {
|
|
|
+ tableHeader,
|
|
|
+ tableHeaderG,
|
|
|
+ tableHeaderDetail,
|
|
|
+ tableHeaderGDetail,
|
|
|
+} from "@/utills//constant.js";
|
|
|
+import { companys } from "@/api/curveAnalyse";
|
|
|
+import { getStation, cjdb, details } from "@/api/performance";
|
|
|
+import PieChart from "../../homePage/components/pieChart.vue";
|
|
|
+import BarCharts from "../../homePage/components/barCharts.vue";
|
|
|
+import dayinfo from "../compontent/dayinfo.vue";
|
|
|
+import dataJson from "./dataJson.json"
|
|
|
+export default {
|
|
|
+ name: "intervalBenchmarking", //场际对标
|
|
|
+ components: {
|
|
|
+ PieChart,
|
|
|
+ BarCharts,
|
|
|
+ dayinfo,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tableHeader,
|
|
|
+ tableHeaderG,
|
|
|
+ tableHeaderDetail,
|
|
|
+ tableHeaderGDetail,
|
|
|
+ page: {
|
|
|
+ pagesize: 10,
|
|
|
+ currentPage: 1,
|
|
|
+ total: 0,
|
|
|
+ },
|
|
|
+ pageD: {
|
|
|
+ pagesize: 19,
|
|
|
+ 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: "55vh",
|
|
|
+ detailRow: {},
|
|
|
+ };
|
|
|
+ },
|
|
|
+ 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.endTime = dayjs(new Date().getTime()).format("YYYY-MM-DD");
|
|
|
+ this.initialization();
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ if (this.screenHeight > 1100) {
|
|
|
+ this.echartsHeight = "58vh";
|
|
|
+ } else {
|
|
|
+ this.echartsHeight = "55vh";
|
|
|
+ }
|
|
|
+ window.onresize = () => {
|
|
|
+ return (() => {
|
|
|
+ window.screenHeight = window.innerHeight;
|
|
|
+ this.screenHeight = window.screenHeight;
|
|
|
+ })();
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handlePageChange(val) {
|
|
|
+ this.page.currentPage = val;
|
|
|
+ this.gerCjdb();
|
|
|
+ },
|
|
|
+ handlePageDChange(val) {
|
|
|
+ this.pageD.currentPage = val;
|
|
|
+ this.goDetail();
|
|
|
+ },
|
|
|
+ handleSizeDChange(val) {
|
|
|
+ this.pageD.currentPage = 1;
|
|
|
+ this.pageD.pagesize = val;
|
|
|
+ this.goDetail();
|
|
|
+ },
|
|
|
+ tabClick(val) {
|
|
|
+ this.tabIndex = val;
|
|
|
+ if (val == -2) {
|
|
|
+ this.company = "SXJ_KGDL_GFFD_ZGS";
|
|
|
+ this.getStation(this.company);
|
|
|
+ this.stationObj = [];
|
|
|
+ this.gerCjdb();
|
|
|
+ } else {
|
|
|
+ this.company = this.companyOptions[0].id;
|
|
|
+ this.getStation(this.company);
|
|
|
+ this.stationObj = [];
|
|
|
+ this.gerCjdb();
|
|
|
+ }
|
|
|
+
|
|
|
+ // this.initialization()
|
|
|
+ },
|
|
|
+ initialization() {
|
|
|
+ this.dataChange(dataJson.data)
|
|
|
+ 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;
|
|
|
+ } else {
|
|
|
+ this.stationList = [];
|
|
|
+ }
|
|
|
+ this.gerCjdb();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ gerCjdb() {
|
|
|
+ cjdb({
|
|
|
+ companys: this.company,
|
|
|
+ type: this.tabIndex,
|
|
|
+ beginDate: this.starTime,
|
|
|
+ endDate: this.endTime,
|
|
|
+ wpids: this.stationObj.join(","),
|
|
|
+ pageSize: this.page.pagesize,
|
|
|
+ pageNum: this.page.currentPage,
|
|
|
+ target: "",
|
|
|
+ sort: "",
|
|
|
+ }).then(({ data: res }) => {
|
|
|
+ this.dataChange(res)
|
|
|
+
|
|
|
+ });
|
|
|
+ },
|
|
|
+ dataChange(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.name,
|
|
|
+ value: item.zssdl,
|
|
|
+ };
|
|
|
+ lossPower.push(obj);
|
|
|
+ barList[0].date.push(item.name);
|
|
|
+ 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.gerCjdb();
|
|
|
+ },
|
|
|
+ handleCompanyChange(val) {
|
|
|
+ this.company = val;
|
|
|
+ this.getStation(val);
|
|
|
+ },
|
|
|
+ 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) {
|
|
|
+ if (!this.displayDetail) {
|
|
|
+ this.displayDetail = true;
|
|
|
+ this.detailRow = row;
|
|
|
+ }
|
|
|
+
|
|
|
+ details({
|
|
|
+ id: this.detailRow.id,
|
|
|
+ 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.name,
|
|
|
+ value: item.gzssdl,
|
|
|
+ });
|
|
|
+ jxssdl.push({
|
|
|
+ text: item.name,
|
|
|
+ value: item.jxssdl,
|
|
|
+ });
|
|
|
+ xnssdl.push({
|
|
|
+ text: item.name,
|
|
|
+ value: item.xnssdl,
|
|
|
+ });
|
|
|
+ xdssdl.push({
|
|
|
+ text: item.name,
|
|
|
+ value: item.xdssdl,
|
|
|
+ });
|
|
|
+ slssdl.push({
|
|
|
+ text: 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;
|
|
|
+ margin-top: 5px;
|
|
|
+}
|
|
|
+.parcel-box {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 30px;
|
|
|
+ padding-bottom: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.form-wrapper {
|
|
|
+ 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%;
|
|
|
+ height: calc(100% - 350px - 43px - 20px);
|
|
|
+ background-color: rgba(0, 0, 0, 0.45);
|
|
|
+ border-radius: 5px;
|
|
|
+}
|
|
|
+.economicTable {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 36px);
|
|
|
+}
|
|
|
+.line {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+.leftContent[data-type~="greenSty"] {
|
|
|
+ background: url("~@/assets/imgs/title_left_bg1.png") no-repeat;
|
|
|
+ }
|
|
|
+ .leftContent[data-type~="blueSty"] {
|
|
|
+ background: url("~@/assets/imgs/title_left_bg.png") no-repeat;
|
|
|
+ }
|
|
|
+ .leftContent {
|
|
|
+ width: 242px;
|
|
|
+ height: 41px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #05bb4c;
|
|
|
+ margin-left: 25px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .rightContent {
|
|
|
+ width: 212px;
|
|
|
+ height: 28px;
|
|
|
+ margin-top: 13px;
|
|
|
+ background: url("../../../../assets/imgs/title_right_bg.png");
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.echarts {
|
|
|
+ width: 100%;
|
|
|
+ height: 350px;
|
|
|
+ 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>
|
sunzehao