|
@@ -1,14 +1,13 @@
|
|
|
<template>
|
|
|
<div class="decision-page-2">
|
|
|
- <div class="title">
|
|
|
- <div class="station">
|
|
|
+ <div class="query-form">
|
|
|
+ <div class="station1">
|
|
|
场站:
|
|
|
<el-select
|
|
|
- class="nb"
|
|
|
size="mini"
|
|
|
v-model="value1"
|
|
|
@change="ChangZhanChange(value1)"
|
|
|
- multiple
|
|
|
+ clearable
|
|
|
collapse-tags
|
|
|
placeholder="请选择"
|
|
|
popper-class="select"
|
|
@@ -23,14 +22,13 @@
|
|
|
</el-select>
|
|
|
</div>
|
|
|
|
|
|
- <div class="station">
|
|
|
+ <div class="station1">
|
|
|
项目:
|
|
|
<el-select
|
|
|
- class="nb"
|
|
|
size="mini"
|
|
|
v-model="value2"
|
|
|
@change="XiangMuChange(value2)"
|
|
|
- multiple
|
|
|
+ clearable
|
|
|
collapse-tags
|
|
|
placeholder="请选择"
|
|
|
popper-class="select"
|
|
@@ -45,10 +43,9 @@
|
|
|
</el-select>
|
|
|
</div>
|
|
|
|
|
|
- <div class="station">
|
|
|
+ <div class="station1">
|
|
|
线路:
|
|
|
<el-select
|
|
|
- class="nb"
|
|
|
size="mini"
|
|
|
v-model="value3"
|
|
|
@change="XianLuChange(value3)"
|
|
@@ -67,11 +64,11 @@
|
|
|
</el-select>
|
|
|
</div>
|
|
|
|
|
|
- <div class="station">
|
|
|
+ <div class="dates">
|
|
|
开始日期:
|
|
|
<div class="search-input">
|
|
|
<el-date-picker
|
|
|
- class="nb"
|
|
|
+ size="mini"
|
|
|
v-model="value4"
|
|
|
@change="BeginChange(value4)"
|
|
|
type="date"
|
|
@@ -83,11 +80,11 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="station">
|
|
|
+ <div class="dates">
|
|
|
结束日期:
|
|
|
<div class="search-input">
|
|
|
<el-date-picker
|
|
|
- class="nb"
|
|
|
+ size="mini"
|
|
|
v-model="value5"
|
|
|
@change="EndChange(value5)"
|
|
|
type="date"
|
|
@@ -104,27 +101,24 @@
|
|
|
|
|
|
<div :class="detailShow == 2 ? 'query-actions1 ' : 'query-actions'">
|
|
|
<div class="but">
|
|
|
- <button
|
|
|
- class="btn green"
|
|
|
- :class="detailShow == 2 ? 'active' : ''"
|
|
|
- @click="AjaxCommon()"
|
|
|
+ <el-button round class="btn green" @click="AjaxCommon()"
|
|
|
+ >搜索</el-button
|
|
|
>
|
|
|
- 搜索
|
|
|
- </button>
|
|
|
- <button
|
|
|
- class="btn"
|
|
|
- :class="detailShow == 2 ? 'active' : ''"
|
|
|
- @click="dbfx"
|
|
|
+ <el-button round class="btn" @click="dbfx"> 对标分析 </el-button>
|
|
|
+ <el-button round class="btn" @click="exportExcel()">导出</el-button>
|
|
|
+ <el-button round class="btn" v-show="detailShow == 2" @click="back"
|
|
|
+ >返回</el-button
|
|
|
>
|
|
|
- 对标分析
|
|
|
- </button>
|
|
|
- <!-- <button class="buttons" size="mini" @click="exportExcel()">导出</button> -->
|
|
|
- <!-- <button class="buttons" size="mini" v-show="detailShow == 2" @click="back">返回</button> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div v-show="detailShow == 1">
|
|
|
- <toolbar-panel title="五项损失率" :showLine="false"></toolbar-panel>
|
|
|
+ <div class="tabCut2">
|
|
|
+ <div class="tabCut-item">
|
|
|
+ <span>五项损失率</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <toolbar-panel title="五项损失率" :showLine="false"></toolbar-panel> -->
|
|
|
<div class="mg-b-16">
|
|
|
<div class="project-table">
|
|
|
<Table
|
|
@@ -135,45 +129,50 @@
|
|
|
></Table>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <div class="echarts">
|
|
|
- <div class="pie-echarts">
|
|
|
- <div class="chart-name">
|
|
|
- <div class="point left bottom"></div>
|
|
|
- <div class="point right bottom"></div>
|
|
|
- <!-- 损失电量分析 -->
|
|
|
+ <div class="echarts">
|
|
|
+ <div class="pie-echarts">
|
|
|
+ <div class="chart-name">
|
|
|
+ <div class="point left bottom"></div>
|
|
|
+ <div class="point right bottom"></div>
|
|
|
+ 损失电量分析
|
|
|
+ </div>
|
|
|
+ <!-- <panel title=" 损失电量分析"> -->
|
|
|
+ <dual-pie-chart
|
|
|
+ height="21.296vh"
|
|
|
+ :innerData="innerFdl"
|
|
|
+ :outerData="outerFdl"
|
|
|
+ paddingWidth="28%"
|
|
|
+ />
|
|
|
+ <!-- </panel> -->
|
|
|
</div>
|
|
|
- <panel title=" 损失电量分析">
|
|
|
- <dual-pie-chart
|
|
|
- height="21.296vh"
|
|
|
- :innerData="innerFdl"
|
|
|
- :outerData="outerFdl"
|
|
|
- paddingWidth="28%"
|
|
|
- />
|
|
|
- </panel>
|
|
|
- </div>
|
|
|
- <div class="bar-echarts">
|
|
|
- <div class="chart-name">
|
|
|
- <div class="point left bottom"></div>
|
|
|
- <div class="point right bottom"></div>
|
|
|
- <!-- 五项损失 -->
|
|
|
+ <div class="bar-echarts">
|
|
|
+ <div class="chart-name">
|
|
|
+ <div class="point left bottom"></div>
|
|
|
+ <div class="point right bottom"></div>
|
|
|
+ 五项损失
|
|
|
+ </div>
|
|
|
+ <!-- <panel title="五项损失"> -->
|
|
|
+ <multiple-bar-chart
|
|
|
+ :height="'calc(100vh - 26.5vh - 500px)'"
|
|
|
+ :list="analyis"
|
|
|
+ :customerTooltip="true"
|
|
|
+ @tooltip="tooltip"
|
|
|
+ :units="['(万KWh)']"
|
|
|
+ />
|
|
|
+ <!-- </panel> -->
|
|
|
</div>
|
|
|
- <panel title="五项损失">
|
|
|
- <multiple-bar-chart
|
|
|
- :height="'calc(100vh - 26.5vh - 500px)'"
|
|
|
- :list="analyis"
|
|
|
- :customerTooltip="true"
|
|
|
- @tooltip="tooltip"
|
|
|
- :units="['(万KWh)']"
|
|
|
- />
|
|
|
- </panel>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <!-- <el-row :type="'flex'" class="content" v-show="detailShow == 2">
|
|
|
+ <el-row :type="'flex'" class="content" v-show="detailShow == 2">
|
|
|
<el-col :span="24" class="pd-l-8">
|
|
|
- <panel :title="'风机对标列表明细'" :showLine="false">
|
|
|
+ <div class="tabCut2">
|
|
|
+ <div class="tabCut-item">
|
|
|
+ <span>风机对标列表明细</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <panel :title="'风机对标列表明细'" :showLine="false"> -->
|
|
|
<div class="project-table">
|
|
|
<Table
|
|
|
:data="tableDataDetail"
|
|
@@ -181,9 +180,9 @@
|
|
|
@onSort="onSort"
|
|
|
></Table>
|
|
|
</div>
|
|
|
- </panel>
|
|
|
+ <!-- </panel> -->
|
|
|
</el-col>
|
|
|
- </el-row> -->
|
|
|
+ </el-row>
|
|
|
<el-dialog
|
|
|
title="对标排名分析"
|
|
|
v-model="dialogVisible"
|
|
@@ -233,12 +232,12 @@ export default {
|
|
|
|
|
|
tableData: {
|
|
|
column: [
|
|
|
- {
|
|
|
- name: "",
|
|
|
- field: "index",
|
|
|
- is_num: false,
|
|
|
- is_light: false,
|
|
|
- },
|
|
|
+ // {
|
|
|
+ // name: "",
|
|
|
+ // field: "index",
|
|
|
+ // is_num: false,
|
|
|
+ // is_light: false,
|
|
|
+ // },
|
|
|
{
|
|
|
name: "",
|
|
|
field: "check",
|
|
@@ -476,7 +475,7 @@ export default {
|
|
|
|
|
|
dataTab.push({
|
|
|
//表格
|
|
|
- index: index + 1,
|
|
|
+ // index: index + 1,
|
|
|
fdl: item.fdl,
|
|
|
name: item.name,
|
|
|
zhpm: item.zhpm,
|
|
@@ -513,20 +512,12 @@ export default {
|
|
|
},
|
|
|
tableDataDetail: {
|
|
|
column: [
|
|
|
- {
|
|
|
- name: "",
|
|
|
- field: "index",
|
|
|
- is_num: false,
|
|
|
- is_light: false,
|
|
|
- },
|
|
|
- {
|
|
|
- // name: "",
|
|
|
- name: "发电量",
|
|
|
- field: "fdl",
|
|
|
- is_num: false,
|
|
|
- is_light: false,
|
|
|
- display: "none",
|
|
|
- },
|
|
|
+ // {
|
|
|
+ // name: "",
|
|
|
+ // field: "index",
|
|
|
+ // is_num: false,
|
|
|
+ // is_light: false,
|
|
|
+ // },
|
|
|
{
|
|
|
name: "",
|
|
|
field: "check",
|
|
@@ -555,6 +546,41 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
+ // name: "",
|
|
|
+ name: "发电量",
|
|
|
+ field: "fdl",
|
|
|
+ is_num: false,
|
|
|
+ is_light: false,
|
|
|
+ display: "none",
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // name: "",
|
|
|
+ // field: "check",
|
|
|
+ // is_num: false,
|
|
|
+ // is_light: false,
|
|
|
+ // template: function () {
|
|
|
+ // return "<input class='check curCheckBox checkItem' type='CheckBox'/>";
|
|
|
+ // },
|
|
|
+ // click: function (event, data) {
|
|
|
+ // var dataId = that.tableIdArr[data.index - 1];
|
|
|
+ // if (event.target.checked == false && that.checkLength <= 2) {
|
|
|
+ // that.tableId.forEach((item, i) => {
|
|
|
+ // if (item == dataId) {
|
|
|
+ // that.tableId.splice(i, 1);
|
|
|
+ // that.dbData.splice(i, 1);
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // that.checkLength--;
|
|
|
+ // } else if (event.target.checked && that.checkLength < 2) {
|
|
|
+ // that.tableId.push(dataId);
|
|
|
+ // that.dbData.push(data);
|
|
|
+ // that.checkLength++;
|
|
|
+ // } else if (that.checkLength == 2) {
|
|
|
+ // event.target.checked = false;
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ {
|
|
|
name: "风机名称",
|
|
|
field: "name",
|
|
|
is_num: false,
|
|
@@ -1403,14 +1429,6 @@ export default {
|
|
|
align-items: center;
|
|
|
margin-top: 10px;
|
|
|
margin-bottom: 10px;
|
|
|
- // .nb{
|
|
|
- // width: 180px;
|
|
|
- // height: 25px;
|
|
|
- // background: rgba(67,81,107,0.2);
|
|
|
- // border: 1px solid #3B4C6C;
|
|
|
- // border-radius: 13px;
|
|
|
-
|
|
|
- // }
|
|
|
|
|
|
.station {
|
|
|
display: flex;
|
|
@@ -1466,8 +1484,9 @@ export default {
|
|
|
padding-left: 20px;
|
|
|
position: relative;
|
|
|
height: 39px;
|
|
|
- width: 98%;
|
|
|
- margin-left: 1%;
|
|
|
+ width: 100%;
|
|
|
+ // margin-left: 1%;
|
|
|
+ background:rgba(0, 0, 0, 0.45) ;
|
|
|
border-bottom: 1px solid rgba(153, 153, 153, 0.5);
|
|
|
font-size: 16px;
|
|
|
font-family: Microsoft YaHei;
|
|
@@ -1478,7 +1497,9 @@ export default {
|
|
|
.pie-echarts {
|
|
|
width: 30%;
|
|
|
height: 100%;
|
|
|
- background: rgba(0, 0, 0, 0.45);
|
|
|
+ border: 1px solid rgba(153, 153, 153, 0.5);
|
|
|
+ // background: rgba(0, 0, 0, 0.45);
|
|
|
+ // background: red;
|
|
|
border-radius: 5px;
|
|
|
}
|
|
|
|
|
@@ -1486,7 +1507,9 @@ export default {
|
|
|
width: 69%;
|
|
|
margin-left: 1%;
|
|
|
height: 100%;
|
|
|
- background: rgba(0, 0, 0, 0.45);
|
|
|
+ border: 1px solid rgba(153, 153, 153, 0.5);
|
|
|
+ // background: rgba(0, 0, 0, 0.45);
|
|
|
+
|
|
|
border-radius: 5px;
|
|
|
}
|
|
|
}
|