|
|
@@ -0,0 +1,695 @@
|
|
|
+<template>
|
|
|
+<div class="box">
|
|
|
+ <div class="searchBar">
|
|
|
+ <el-form :inline="true" :model="formInline" class="demo-form-inline">
|
|
|
+ <el-row :gutter="1">
|
|
|
+ <el-form-item label="风场">
|
|
|
+ <el-select v-model="value" multiple placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.name"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <!-- <el-form-item label="项目">
|
|
|
+ <el-input
|
|
|
+ v-model="formInline.project"
|
|
|
+ id="project"
|
|
|
+ placeholder="项目"
|
|
|
+ @focus="checkwindfarm"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="线路">
|
|
|
+ <el-input
|
|
|
+ v-model="formInline.line"
|
|
|
+ id="line"
|
|
|
+ placeholder="线路"
|
|
|
+ @focus="checkproject"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item> -->
|
|
|
+
|
|
|
+ <el-form-item label="选择时间：">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="timedate"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="queryApData" :plain="true"
|
|
|
+ >查询</el-button
|
|
|
+ >
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item >
|
|
|
+ <el-button type="primary" @click="queryApDataMx"
|
|
|
+ >对标分析</el-button
|
|
|
+ >
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="toExcel">导出</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ <el-table
|
|
|
+ :data="gridData"
|
|
|
+ :row-style="{ height: '10px' }"
|
|
|
+ :cell-style="{ textAlign: 'center',padding:'1px' }"
|
|
|
+ :header-cell-style="headStyle"
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
+ @sort-change="changeTableSort"
|
|
|
+ style="font-size: 10px;" >
|
|
|
+ <el-table-column label="损失率对标列表">
|
|
|
+ <el-table-column
|
|
|
+ type="index"
|
|
|
+ width="30">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ type="selection"
|
|
|
+ width=45>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="wpName"
|
|
|
+ label="风机"
|
|
|
+ width="300">
|
|
|
+ </el-table-column>
|
|
|
+ <!-- <el-table-column
|
|
|
+ prop="ordernum"
|
|
|
+ label="排名"
|
|
|
+ width="60">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="gzssnum"
|
|
|
+ label="故障排名"
|
|
|
+ width="70">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ :sortable="'custom'"
|
|
|
+ prop="gzss"
|
|
|
+ label="故障损失"
|
|
|
+ width="70">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="whssnum"
|
|
|
+ label="检修排名"
|
|
|
+ width="70">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="whss"
|
|
|
+ label="检修损失"
|
|
|
+ width="70">
|
|
|
+ </el-table-column> -->
|
|
|
+ <el-table-column
|
|
|
+ :sortable="'custom'"
|
|
|
+ prop="qfssnum"
|
|
|
+ label="性能损失电量排名"
|
|
|
+ width="300">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ :sortable="'custom'"
|
|
|
+ prop="qfss"
|
|
|
+ label="性能损失电量"
|
|
|
+ width="300">
|
|
|
+ </el-table-column>
|
|
|
+ <!-- <el-table-column
|
|
|
+ prop="xdssnum"
|
|
|
+ label="限电排名"
|
|
|
+ width="70">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="xdss"
|
|
|
+ label="限电损失"
|
|
|
+ width="70">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="slssnum"
|
|
|
+ label="受累排名"
|
|
|
+ width="70">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="slss"
|
|
|
+ label="受累损失"
|
|
|
+ width="70">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="gzsslnum"
|
|
|
+ label="故障损失率排名"
|
|
|
+ width="110">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="gzssl"
|
|
|
+ label="故障损失率"
|
|
|
+ width="85">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="jxsslnum"
|
|
|
+ label="检修损失率排名"
|
|
|
+ width="110">
|
|
|
+ </el-table-column> -->
|
|
|
+ <!-- <el-table-column
|
|
|
+ prop="jxssl"
|
|
|
+ label="检修损失率"
|
|
|
+ width="85">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="qflnum"
|
|
|
+ label="弃风率排名"
|
|
|
+ width="90">
|
|
|
+ </el-table-column> -->
|
|
|
+ <!-- <el-table-column
|
|
|
+ prop="qfl"
|
|
|
+ label="弃风率"
|
|
|
+ width="70">
|
|
|
+ </el-table-column> -->
|
|
|
+ <el-table-column
|
|
|
+ :sortable="'custom'"
|
|
|
+ prop="xnsslnum"
|
|
|
+ label="性能损失率排名"
|
|
|
+ width="300">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ :sortable="'custom'"
|
|
|
+ prop="xnssl"
|
|
|
+ label="性能损失率(%)"
|
|
|
+ width="300">
|
|
|
+ </el-table-column>
|
|
|
+ <!-- <el-table-column
|
|
|
+ prop="slssl"
|
|
|
+ label="受累损失率"
|
|
|
+ width="81">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="fwjsl"
|
|
|
+ label="复位及时率"
|
|
|
+ width="81">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="xqjsl"
|
|
|
+ label="消缺及时率"
|
|
|
+ width="81">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="ztzhjsl"
|
|
|
+ label="状态转换率"
|
|
|
+ width="81">
|
|
|
+ </el-table-column> -->
|
|
|
+ <el-table-column
|
|
|
+ prop="address"
|
|
|
+ label="操作"
|
|
|
+ width="300">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-dialog class="el-dialog_body" width="60%" title="对标信息分析" :visible.sync="dialogTableVisible" append-to-body>
|
|
|
+ <div class="margin">
|
|
|
+ <div class="dialogLeftData">
|
|
|
+ <div id="leiDaTu" class="echart"></div>
|
|
|
+ <div id="leiDaTu2" class="echart"></div>
|
|
|
+ </div>
|
|
|
+ <div class="dialogRightData">
|
|
|
+ <el-table :data="getTableData" height="618"
|
|
|
+ :row-style="{ height: '10px' }"
|
|
|
+ border :header-cell-style="headStyle" :cell-style="{ textAlign: 'center',padding:'7px' }"
|
|
|
+ style="width: 100%;font-size: 10px;">
|
|
|
+ <el-table-column prop="index" label="指标">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="data1" :label=fdcName1>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="data2" :label=fdcName2>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <!-- <div style="text-align: center;">
|
|
|
+ <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage2"
|
|
|
+ :page-sizes="[10, 50, 100, 1000]"
|
|
|
+ :page-size="pagesize" layout="sizes, prev, pager, next" :total="1000">
|
|
|
+ </el-pagination>
|
|
|
+ </div> -->
|
|
|
+ <div class="pieChart">
|
|
|
+ <FiveLossRatesPieChart ref="FiveLossRatesPieChart"></FiveLossRatesPieChart>
|
|
|
+ </div>
|
|
|
+ <div class="histogramChart">
|
|
|
+ <FiveLossRatesHistogramChart ref="FiveLossRatesHistogramChart"></FiveLossRatesHistogramChart>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import FiveLossRatesPieChart from '../../views/benchMarking/FiveLossRatesPieChart.vue';
|
|
|
+import FiveLossRatesHistogramChart from '../../views/benchMarking/FiveLossRatesHistogramChart.vue';
|
|
|
+export default {
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ formInline: {
|
|
|
+ windfarm: "",
|
|
|
+ project: "",
|
|
|
+ line: "",
|
|
|
+ },
|
|
|
+ timedate: [
|
|
|
+ // {beginDate:'2021-01-01'},
|
|
|
+ // {endDate:'2021-01-04'}
|
|
|
+ ],
|
|
|
+ isAsc:'asc',
|
|
|
+ beginDate:'2021-01-01',
|
|
|
+ endDate:'2021-01-04',
|
|
|
+ gridData:"",
|
|
|
+ multipleSelection:[],
|
|
|
+ sortInOrder:[],
|
|
|
+ sortInOrderTop:[],
|
|
|
+ sortInOrde2:[],
|
|
|
+ getTableData:[],
|
|
|
+ sortInOrderTop2:[],
|
|
|
+ fdcName1:'',
|
|
|
+ fdcName2:'',
|
|
|
+ currentPage2: 1,
|
|
|
+ pagesize: 10,
|
|
|
+ fdcLineData:'',
|
|
|
+ options: [{
|
|
|
+ value: 'MHS_FDC',
|
|
|
+ label: '麻黄山风电场'
|
|
|
+ }, {
|
|
|
+ value: 'NSS_FDC',
|
|
|
+ label: '牛首山风电场'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'SBQ_FDC',
|
|
|
+ label: '石板泉风电场'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'QS_FDC',
|
|
|
+ label: '青山风电场'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'XS_FDC',
|
|
|
+ label: '香山风电场'
|
|
|
+ }],
|
|
|
+ value: '',
|
|
|
+ wpId:[],
|
|
|
+ wpName:[],
|
|
|
+ orderByColumn:'',
|
|
|
+ dialogTableVisible:false,
|
|
|
+ lineDataOption:[],
|
|
|
+ tableData: [{
|
|
|
+ date: '2016-05-02',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1518 弄'
|
|
|
+ }, {
|
|
|
+ date: '2016-05-04',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1517 弄'
|
|
|
+ }, {
|
|
|
+ date: '2016-05-01',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1519 弄'
|
|
|
+ }, {
|
|
|
+ date: '2016-05-03',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1516 弄'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: '2016-05-03',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1516 弄'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: '2016-05-03',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1516 弄'
|
|
|
+ }]
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components:{
|
|
|
+ FiveLossRatesPieChart:FiveLossRatesPieChart,
|
|
|
+ FiveLossRatesHistogramChart:FiveLossRatesHistogramChart
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+ this.FiveLossInformation();
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ headStyle() {
|
|
|
+ return "text-align:center"
|
|
|
+ },
|
|
|
+ onSubmit() {
|
|
|
+ console.log("submit!");
|
|
|
+ },
|
|
|
+ handleClick() {},
|
|
|
+ deleteRow(index, rows) {
|
|
|
+ rows.splice(index, 1);
|
|
|
+ },
|
|
|
+ queryApData() {
|
|
|
+ this.FiveLossInformation();
|
|
|
+ // if (this.formInline.line == "") {
|
|
|
+ // this.$message.error("请选择路线！");
|
|
|
+ // return;
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ handleEdit(a,b){
|
|
|
+ this.wpId = [];
|
|
|
+ this.lineDataOption = [];
|
|
|
+ if(this.multipleSelection.length==2){
|
|
|
+ for(let i=0;i<this.multipleSelection.length;i++){
|
|
|
+ this.wpId.push(this.multipleSelection[i].wpId)
|
|
|
+ this.wpName.push(this.multipleSelection[i].wpName)
|
|
|
+ this.lineDataOption.push({id:this.multipleSelection[i].wpId,name:this.multipleSelection[i].wpName})
|
|
|
+ }
|
|
|
+ console.log(this.lineDataOption)
|
|
|
+ this.$router.push({
|
|
|
+ path:'/fiveLossLineTable',
|
|
|
+ query:{
|
|
|
+ wpId:this.wpId,
|
|
|
+ beginDate:this.beginDate,
|
|
|
+ endDate:this.endDate,
|
|
|
+ wpName:this.wpName,
|
|
|
+ select:this.lineDataOption
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ console.log(b)
|
|
|
+ this.lineDataOption.push({id:b.wpId,name:b.wpName})
|
|
|
+ console.log(this.lineDataOption)
|
|
|
+ this.$router.push({
|
|
|
+ path:'/fiveLossLineTable',
|
|
|
+ query:{wpId:b.wpId,
|
|
|
+ beginDate:this.beginDate,
|
|
|
+ endDate:this.endDate,
|
|
|
+ wpName:b.wpName,
|
|
|
+ select:this.lineDataOption}
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ checkwindfarm() {
|
|
|
+ if (this.formInline.windfarm == "") {
|
|
|
+ this.$message.error("请选择风场！");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ checkproject() {
|
|
|
+ if (this.formInline.project == "") {
|
|
|
+ this.$message.error("请选择项目！");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (new Date(this.timedate) == null) {
|
|
|
+ this.$message.error("请选择时间");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ queryApDataMx() {
|
|
|
+ this.dialogTableVisible = true;
|
|
|
+ this.$nextTick(function() {
|
|
|
+ this.drawPie('leiDaTu')
|
|
|
+ })
|
|
|
+ this.$nextTick(function() {
|
|
|
+ this.drawPie2('leiDaTu2')
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleSelectionChange(val) {
|
|
|
+ this.sortInOrder = [];
|
|
|
+ this.sortInOrderTop = [];
|
|
|
+ this.getTableData = [];
|
|
|
+ this.sortInOrde2 = [];
|
|
|
+ this.multipleSelection = val;
|
|
|
+ if(this.multipleSelection.length==2){
|
|
|
+ this.fdcName1 = this.multipleSelection[0].wpName;
|
|
|
+ this.fdcName2 = this.multipleSelection[1].wpName;
|
|
|
+ this.sortInOrder.push(this.multipleSelection[0].fnlyl,this.multipleSelection[0].xqjsl,
|
|
|
+ this.multipleSelection[0].ztzhjsl,this.multipleSelection[0].fwjsl,this.multipleSelection[0].slssl,
|
|
|
+ this.multipleSelection[0].xnssl,this.multipleSelection[0].qfl,this.multipleSelection[0].jxssl,
|
|
|
+ this.multipleSelection[0].gzssl);
|
|
|
+ this.sortInOrderTop.push(this.multipleSelection[1].fnlyl,this.multipleSelection[1].xqjsl,
|
|
|
+ this.multipleSelection[1].ztzhjsl,this.multipleSelection[1].fwjsl,this.multipleSelection[1].slssl,
|
|
|
+ this.multipleSelection[1].xnssl,this.multipleSelection[1].qfl,this.multipleSelection[1].jxssl,
|
|
|
+ this.multipleSelection[1].gzssl);
|
|
|
+ for(let i=0;i<this.multipleSelection.length;i++){
|
|
|
+ this.sortInOrde2.push({product:this.multipleSelection[i].wpName,'限电损失电量单位:万KWh':this.multipleSelection[i].xdss,
|
|
|
+ '故障损失电量单位:万KWh':this.multipleSelection[i].gzss,'检修损失电量单位:万KWh':this.multipleSelection[i].jxssl,
|
|
|
+ '性能损失电量单位:万KWh':this.multipleSelection[i].xnssl,'受累损失电量单位:万KWh':this.multipleSelection[i].slss});
|
|
|
+ }
|
|
|
+ this.getTableData.push({index:'发电量',data1:this.multipleSelection[0].fdl,data2:this.multipleSelection[1].fdl});
|
|
|
+ this.getTableData.push({index:'故障损失电量',data1:this.multipleSelection[0].gzss,data2:this.multipleSelection[1].gzss});
|
|
|
+ this.getTableData.push({index:'检修损失电量',data1:this.multipleSelection[0].jxssl,data2:this.multipleSelection[1].jxssl});
|
|
|
+ this.getTableData.push({index:'性能未达标损失电量',data1:this.multipleSelection[0].xnsslfraction,data2:this.multipleSelection[1].xnsslfraction});
|
|
|
+ this.getTableData.push({index:'受累损失电量',data1:this.multipleSelection[0].slss,data2:this.multipleSelection[1].slss});
|
|
|
+ this.getTableData.push({index:'风能利用率',data1:this.multipleSelection[0].fnlyl,data2:this.multipleSelection[1].fnlyl});
|
|
|
+ this.getTableData.push({index:'故障损失率',data1:this.multipleSelection[0].gzssl,data2:this.multipleSelection[1].gzssl});
|
|
|
+ this.getTableData.push({index:'检修损失率',data1:this.multipleSelection[0].jxssl,data2:this.multipleSelection[1].jxssl});
|
|
|
+ this.getTableData.push({index:'弃风率',data1:this.multipleSelection[0].qfl,data2:this.multipleSelection[1].qfl});
|
|
|
+ this.getTableData.push({index:'性能损失率',data1:this.multipleSelection[0].xnssl,data2:this.multipleSelection[1].xnssl});
|
|
|
+ this.getTableData.push({index:'受累损失率',data1:this.multipleSelection[0].slssl,data2:this.multipleSelection[1].slssl});
|
|
|
+ this.getTableData.push({index:'复位及时率',data1:this.multipleSelection[0].fwjsl,data2:this.multipleSelection[1].fwjsl});
|
|
|
+ this.getTableData.push({index:'消缺及时率',data1:this.multipleSelection[0].xqjsl,data2:this.multipleSelection[1].xqjsl});
|
|
|
+ this.getTableData.push({index:'状态转换率',data1:this.multipleSelection[0].ztzhjsl,data2:this.multipleSelection[1].ztzhjsl});
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ // console.log(`当前页: ${val}`);
|
|
|
+ },
|
|
|
+ handleSizeChange(val) {
|
|
|
+ console.log(`每页 ${val} 条`);
|
|
|
+ this.pagesize = val;
|
|
|
+ },
|
|
|
+ changeTableSort(column){
|
|
|
+ this.orderByColumn = column.prop;
|
|
|
+ if(column.order == "descending"){
|
|
|
+ this.isAsc = 'desc';
|
|
|
+ }else if(column.order == "ascending"){
|
|
|
+ this.isAsc = "asc";
|
|
|
+ }
|
|
|
+ this.FiveLossInformation();
|
|
|
+ },
|
|
|
+ FiveLossInformation(){
|
|
|
+ let that = this;
|
|
|
+ this.$http.get('/powercompare/windfarmAjax').then((res) => {
|
|
|
+ that.options = res.data.data;
|
|
|
+ // console.log(this.options)
|
|
|
+ })
|
|
|
+ if(this.timedate == ''){
|
|
|
+ // this.$message({
|
|
|
+ // message:'请选择时间',
|
|
|
+ // type:'warning'
|
|
|
+ // });
|
|
|
+ this.beginDate = '2021-01-01';
|
|
|
+ this.endDate = '2021-01-04';
|
|
|
+ // return;
|
|
|
+ }else{
|
|
|
+ this.beginDate = this.timedate[0];
|
|
|
+ this.endDate = this.timedate[1];
|
|
|
+ }
|
|
|
+ console.log(this.isAsc)
|
|
|
+ var fiveLossData = new URLSearchParams();
|
|
|
+ fiveLossData.append('pageNum',this.currentPage2);
|
|
|
+ fiveLossData.append('pageSize',this.pagesize);
|
|
|
+ fiveLossData.append('orderByColumn',this.orderByColumn);
|
|
|
+ fiveLossData.append('isAsc',this.isAsc);
|
|
|
+ fiveLossData.append('wpId',this.value);
|
|
|
+ fiveLossData.append('beginDate',this.beginDate);
|
|
|
+ fiveLossData.append('endDate',this.endDate);
|
|
|
+ this.$http.post('/contrast/benchmarkLossList',fiveLossData).then((res) => {
|
|
|
+ that.gridData = res.data.data;
|
|
|
+ // console.log(that.gridData);
|
|
|
+ that.$refs.FiveLossRatesPieChart.getPackageData(that.gridData);
|
|
|
+ that.$refs.FiveLossRatesHistogramChart.getPackageData2(that.gridData);
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ drawPie() {
|
|
|
+ // console.log(this.sortInOrder)
|
|
|
+ var charts;
|
|
|
+ if (charts != null && charts != "" && charts != undefined){
|
|
|
+ charts.dispose();
|
|
|
+ }
|
|
|
+ charts= this.$echarts.init(document.getElementById('leiDaTu'));
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ // text: '对标排名分析',
|
|
|
+ left: 'center'
|
|
|
+ },
|
|
|
+ tooltip: {},
|
|
|
+ // legend: {
|
|
|
+ // data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）'],
|
|
|
+ // left: 'right'
|
|
|
+ // },
|
|
|
+ radar: {
|
|
|
+ // shape: 'circle',
|
|
|
+ name: {
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ backgroundColor: '#999',
|
|
|
+ borderRadius: 3,
|
|
|
+ padding: [3, 5]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ indicator: [
|
|
|
+ { name: '风能利用率', max: 150},
|
|
|
+ { name: '消缺及时率', max: 150},
|
|
|
+ { name: '状态转换率', max: 150},
|
|
|
+ { name: '复位及时率', max: 150},
|
|
|
+ { name: '受累损失率', max: 150},
|
|
|
+ { name: '性能损失率', max: 150},
|
|
|
+ { name: '弃风率', max: 150},
|
|
|
+ { name: '检修损失率', max: 150},
|
|
|
+ { name: '故障损失率', max: 150},
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ name: '预算 vs 开销（Budget vs spending）',
|
|
|
+ type: 'radar',
|
|
|
+ // areaStyle: {normal: {}},
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: this.sortInOrder,
|
|
|
+ name:this.fdcName1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: this.sortInOrderTop,
|
|
|
+ name: this.fdcName2
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ charts.clear();
|
|
|
+ charts.setOption(option);
|
|
|
+
|
|
|
+ },
|
|
|
+ drawPie2() {
|
|
|
+ var charts2;
|
|
|
+ if (charts2 != null && charts2 != "" && charts2 != undefined){
|
|
|
+ charts2.dispose();
|
|
|
+ }
|
|
|
+ charts2= this.$echarts.init(document.getElementById('leiDaTu2'));
|
|
|
+ let option2 = {
|
|
|
+ legend: {
|
|
|
+ orient: 'vertical',
|
|
|
+ left: 'right'
|
|
|
+ },
|
|
|
+ tooltip: {},
|
|
|
+ dataset: {
|
|
|
+ dimensions: ['product', '限电损失电量单位:万KWh', '故障损失电量单位:万KWh', '检修损失电量单位:万KWh', '性能损失电量单位:万KWh', '受累损失电量单位:万KWh'],
|
|
|
+ source: this.sortInOrde2
|
|
|
+ },
|
|
|
+ xAxis: {type: 'category'},
|
|
|
+ yAxis: {},
|
|
|
+ // Declare several bar series, each will be mapped
|
|
|
+ // to a column of dataset.source by default.
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ // barGap:'100%',/*多个并排柱子设置柱子之间的间距*/
|
|
|
+ type: 'bar',
|
|
|
+ barWidth : 30,
|
|
|
+ itemStyle:{
|
|
|
+ normal:{
|
|
|
+ color:'#D201D8'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+
|
|
|
+ type: 'bar',
|
|
|
+ barWidth : 30,
|
|
|
+ itemStyle:{
|
|
|
+ normal:{
|
|
|
+ color:'#FD0100'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+
|
|
|
+ type: 'bar',
|
|
|
+ barWidth : 30,
|
|
|
+ itemStyle:{
|
|
|
+ normal:{
|
|
|
+ color:'#FF7B16'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+
|
|
|
+ type: 'bar',
|
|
|
+ barWidth : 30,
|
|
|
+ itemStyle:{
|
|
|
+ normal:{
|
|
|
+ color:'#8085E9'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'bar',
|
|
|
+ barWidth : 30,
|
|
|
+ itemStyle:{
|
|
|
+ normal:{
|
|
|
+ color:'#A6A6A6'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ charts2.clear();
|
|
|
+ charts2.setOption(option2);
|
|
|
+
|
|
|
+ },
|
|
|
+ toExcel(){}
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .box{
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .searchBar{
|
|
|
+ margin-top: 1%;
|
|
|
+ }
|
|
|
+ .pieChart{
|
|
|
+ margin-top: 2%;
|
|
|
+ }
|
|
|
+ .histogramChart{
|
|
|
+ margin-bottom: 10%;
|
|
|
+ }
|
|
|
+ #leiDaTu {
|
|
|
+ margin-left: 5%;
|
|
|
+ height: 300px;
|
|
|
+ width: 100%;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ #leiDaTu2 {
|
|
|
+ margin: 15%;
|
|
|
+ height: 300px;
|
|
|
+ width: 450px;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .margin {
|
|
|
+ width: 100%;
|
|
|
+ height: 618px;
|
|
|
+ }
|
|
|
+ .dialogLeftData {
|
|
|
+ width: 50%;
|
|
|
+ height: 650px;
|
|
|
+ text-align: center;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dialogRightData {
|
|
|
+ width: 50%;
|
|
|
+ height: 650px;
|
|
|
+ text-align: center;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+</style>
|
