|
@@ -5,7 +5,7 @@
|
|
|
<div class="query-item">
|
|
|
<div class="lable">场站:</div>
|
|
|
<div class="search-input">
|
|
|
- <el-select v-model="value1" @change="ChangZhanChange(value1)" multiple placeholder="请选择"
|
|
|
+ <el-select v-model="value1" @change="ChangZhanChange(value1)" clearable placeholder="请选择"
|
|
|
popper-class="select">
|
|
|
<el-option v-for="item in ChangZhan" :key="item.id" :value="item.id" :label="item.name">
|
|
|
</el-option>
|
|
@@ -13,10 +13,10 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="query-item">
|
|
|
- <div class="lable">项目:</div>
|
|
|
+ <div class="lable">风机:</div>
|
|
|
<div class="search-input">
|
|
|
- <el-select v-model="value2" @change="XiangMuChange(value2)" multiple placeholder="请选择"
|
|
|
- popper-class="select">
|
|
|
+ <el-select v-model="value2" @change="XiangMuChange(value2)" multiple multiple-limit="5"
|
|
|
+ placeholder="请选择" popper-class="select">
|
|
|
<el-option v-for="item in XiangMu" :key="item.id" :value="item.id" :label="item.name">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
@@ -30,14 +30,18 @@
|
|
|
</el-date-picker>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="query-actions">
|
|
|
+ <button class="btn" @click="reset">重置</button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="actions mg-b-8">
|
|
|
- <button class="btn green">风场</button>
|
|
|
- <button class="btn">项目</button>
|
|
|
- <button class="btn">集电线路</button>
|
|
|
+ <button class="btn" :class="TypeClass==0?'green':''" @click="TypeClick(0)">日风电机对比</button>
|
|
|
+ <button class="btn" :class="TypeClass==1?'green':''" @click="TypeClick(1)">月风电机对比</button>
|
|
|
+ <button class="btn" :class="TypeClass==2?'green':''" @click="TypeClick(2)">年风电机对比</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 列表 -->
|
|
|
+ <toolbar-panel title="单机横向对比" :showLine="false"></toolbar-panel>
|
|
|
<div class="info">
|
|
|
<div class="mg-b-16">
|
|
|
<div class="project-table">
|
|
@@ -53,13 +57,9 @@
|
|
|
<div v-if="i == 0">22</div>
|
|
|
<div v-if="i == 1">风资源</div>
|
|
|
<div v-if="i != 0 && i != 1">
|
|
|
- <div class="direction-title">3.123</div>
|
|
|
- <div class="direction-chart">
|
|
|
- <DirectionRadarChart :width="'70%'" :height="'232px'" :value="90" />
|
|
|
- <div class="legend mg-t-16">
|
|
|
- <span class="dot"></span>
|
|
|
- <span>静风频率为2</span>
|
|
|
- </div>
|
|
|
+ <div class="direction-title">{{listName[i - 2]}}</div>
|
|
|
+ <div class="direction-chart" :class="(i-2) < fzyData.length?'':'hide'">
|
|
|
+ <normal-radar-chart :width="'70%'" :height="'232px'" :value="fzyData[i-2]" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</td>
|
|
@@ -72,18 +72,13 @@
|
|
|
<toolbar-panel :title="'日功率曲线'">
|
|
|
<template v-slot:tools>
|
|
|
<div class="tools">
|
|
|
- <div class="tool-block">
|
|
|
- <div class="legend bg-green"></div>
|
|
|
- <div class="legend-text">理论功率</div>
|
|
|
- </div>
|
|
|
- <div class="tool-block">
|
|
|
- <div class="legend bg-orange"></div>
|
|
|
- <div class="legend-text">预测功率4小时</div>
|
|
|
+ <div class="tool-block" v-for="(item , index) in listName">
|
|
|
+ <div class="legend" :class="'bg-'+(index + 1)"></div>
|
|
|
+ <div class="legend-text">{{item}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
- <double-line-chart :height="'200px'" />
|
|
|
- <normal-line-chart :height="'200px'" />
|
|
|
+ <double-line-chart :height="'200px'" :list="list" />
|
|
|
</toolbar-panel>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -93,8 +88,7 @@
|
|
|
|
|
|
<script>
|
|
|
import DoubleLineChart from "../../components/chart/line/double-line-chart.vue";
|
|
|
- import NormalLineChart from "../../components/chart/line/normal-line-chart.vue";
|
|
|
- import DirectionRadarChart from "../../components/chart/radar/direction-radar-chart.vue";
|
|
|
+ import NormalRadarChart from "../../components/chart/radar/normal-radar-chart.vue";
|
|
|
import SvgIcon from "../../components/coms/icon/svg-icon.vue";
|
|
|
import ToolbarPanel from "../../components/coms/panel/toolbar-panel.vue";
|
|
|
import Table from "../../components/coms/table/table.vue";
|
|
@@ -102,10 +96,9 @@
|
|
|
components: {
|
|
|
Table,
|
|
|
SvgIcon,
|
|
|
- DirectionRadarChart,
|
|
|
ToolbarPanel,
|
|
|
DoubleLineChart,
|
|
|
- NormalLineChart
|
|
|
+ NormalRadarChart
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
@@ -123,91 +116,61 @@
|
|
|
is_light: false,
|
|
|
},
|
|
|
{
|
|
|
- name: "项目",
|
|
|
- field: "lqf",
|
|
|
+ name: "",
|
|
|
+ field: "data1",
|
|
|
is_num: false,
|
|
|
is_light: false,
|
|
|
},
|
|
|
{
|
|
|
- name: "项目",
|
|
|
- field: "yggl",
|
|
|
+ name: "",
|
|
|
+ field: "data2",
|
|
|
is_num: false,
|
|
|
is_light: false,
|
|
|
},
|
|
|
{
|
|
|
- name: "项目",
|
|
|
- field: "yyy",
|
|
|
+ name: "",
|
|
|
+ field: "data3",
|
|
|
is_num: false,
|
|
|
is_light: false,
|
|
|
},
|
|
|
{
|
|
|
- name: "项目",
|
|
|
- field: "pcspp",
|
|
|
+ name: "",
|
|
|
+ field: "data4",
|
|
|
is_num: false,
|
|
|
is_light: false,
|
|
|
- },
|
|
|
+ }, {
|
|
|
+ name: "",
|
|
|
+ field: "data5",
|
|
|
+ is_num: false,
|
|
|
+ is_light: false,
|
|
|
+ }
|
|
|
],
|
|
|
- data: [{
|
|
|
- index: 1,
|
|
|
- name: "MG01-01",
|
|
|
- lqf: "0.1000",
|
|
|
- yggl: "0.1000",
|
|
|
- yyy: "0.10",
|
|
|
- pcspp: "0.1000",
|
|
|
- u1: "0.1000",
|
|
|
- u2: "0.1000",
|
|
|
- v1: "0.1000",
|
|
|
- v2: "0.1000",
|
|
|
- w1: "0.1000",
|
|
|
- w2: "0.1000",
|
|
|
- zca: "0.1000",
|
|
|
- zcb: "0.1000",
|
|
|
- clx: "0.1000",
|
|
|
- clx1: "0.1000",
|
|
|
- clx2: "0.1000",
|
|
|
- jc: "0.1000",
|
|
|
- hh: "0.1000",
|
|
|
- hj: "0.1000",
|
|
|
- is_light: false,
|
|
|
- }, ],
|
|
|
+ data: [],
|
|
|
},
|
|
|
- options: [{
|
|
|
- value: "选项1",
|
|
|
- label: "黄金糕",
|
|
|
- },
|
|
|
- {
|
|
|
- value: "选项2",
|
|
|
- label: "双皮奶",
|
|
|
- },
|
|
|
- {
|
|
|
- value: "选项3",
|
|
|
- label: "蚵仔煎",
|
|
|
- },
|
|
|
- {
|
|
|
- value: "选项4",
|
|
|
- label: "龙须面",
|
|
|
- },
|
|
|
- {
|
|
|
- value: "选项5",
|
|
|
- label: "北京烤鸭",
|
|
|
- },
|
|
|
- ],
|
|
|
+ ChangZhan: [], //场站
|
|
|
+ XiangMu: [], //项目
|
|
|
value1: [],
|
|
|
value2: [],
|
|
|
- value3: [],
|
|
|
value4: "",
|
|
|
- value5: "",
|
|
|
+ fzyData: [],
|
|
|
+ list: [],
|
|
|
+ listName: [],
|
|
|
+ TypeClass:0,
|
|
|
+ ajaxArr:['daydjhxdbtop','monthdjhxdbtop','yeardjhxdbtop'],
|
|
|
+ ajaxName:'daydjhxdbtop'
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
-
|
|
|
+ this.ChangZhanVal();
|
|
|
+ this.value4 = this.getTime(1);
|
|
|
+ this.AjaxCommon();
|
|
|
},
|
|
|
- methods:{
|
|
|
+ methods: {
|
|
|
ChangZhanVal() {
|
|
|
var that = this;
|
|
|
that.API.requestData({
|
|
|
method: "GET",
|
|
|
- baseURL : "http://10.155.32.4:9001/",
|
|
|
+ baseURL: "http://10.155.32.4:9001/",
|
|
|
subUrl: "benchmarking/wplist",
|
|
|
success(res) {
|
|
|
that.ChangZhan = res.data;
|
|
@@ -217,19 +180,17 @@
|
|
|
ChangZhanChange(val) {
|
|
|
this.value1 = val;
|
|
|
this.value2 = [];
|
|
|
- this.value3 = [];
|
|
|
this.AjaxCommon();
|
|
|
this.XiangMuVal(val);
|
|
|
- this.clearDb();
|
|
|
},
|
|
|
XiangMuVal(val) {
|
|
|
var that = this;
|
|
|
that.API.requestData({
|
|
|
method: "GET",
|
|
|
- baseURL : "http://10.155.32.4:9001/",
|
|
|
- subUrl: "benchmarking/projectList",
|
|
|
+ baseURL: "http://10.155.32.4:9001/",
|
|
|
+ subUrl: "benchmarking/wtList",
|
|
|
data: {
|
|
|
- wpids: val
|
|
|
+ wpid: val
|
|
|
},
|
|
|
success(res) {
|
|
|
that.XiangMu = res.data;
|
|
@@ -237,11 +198,176 @@
|
|
|
});
|
|
|
},
|
|
|
XiangMuChange(val) {
|
|
|
- this.value2 = val;
|
|
|
- this.value3 = [];
|
|
|
+ var that = this;
|
|
|
+ that.value2 = val;
|
|
|
+ that.AjaxCommon();
|
|
|
+ },
|
|
|
+ getTime(val) { //时间戳处理,val=1是默认开始时间(当前月第一天),val=2是默认结束时间(今天)
|
|
|
+ var date = new Date();
|
|
|
+ var year = date.getFullYear(),
|
|
|
+ month = date.getMonth() + 1,
|
|
|
+ day = date.getDate();
|
|
|
+ month >= 1 && month <= 9 ? (month = '0' + month) : '';
|
|
|
+ day >= 0 && day <= 9 ? (day = '0' + day) : '';
|
|
|
+ var begin = year + '-' + month + '-01';
|
|
|
+ var end = year + '-' + month + '-' + day;
|
|
|
+ if (val == 1) {
|
|
|
+ return begin;
|
|
|
+ } else if (val == 2) {
|
|
|
+ return end;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ AjaxCommon() {
|
|
|
+ var that = this;
|
|
|
+ that.API.requestData({
|
|
|
+ method: "GET",
|
|
|
+ baseURL: "http://10.155.32.4:9001/",
|
|
|
+ subUrl: "benchmarking/"+that.ajaxName,
|
|
|
+ data: {
|
|
|
+ wpid: that.value1,
|
|
|
+ wtids: that.value2,
|
|
|
+ date: that.value4,
|
|
|
+ target: '',
|
|
|
+ sort: ''
|
|
|
+ },
|
|
|
+ success(res) {
|
|
|
+ var data = res.data,
|
|
|
+ data2 = [],
|
|
|
+ chart = [],
|
|
|
+ fzy = [],
|
|
|
+ fzyArr = [],
|
|
|
+ jfpl = [],
|
|
|
+ jfplArr = [];
|
|
|
+ let thisItem = [];
|
|
|
+ jfpl = data.pop(); //静风频率
|
|
|
+ fzy = data.pop(); //风资源
|
|
|
+ data.forEach((ele, index) => {
|
|
|
+ for (let key in ele) {
|
|
|
+ if (key !== "name") {
|
|
|
+ thisItem.push(ele[key])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ var count = thisItem.length / data.length;
|
|
|
+
|
|
|
+ data.forEach((item, index) => {
|
|
|
+ data2.push({
|
|
|
+ index: index + 1,
|
|
|
+ name: item.name,
|
|
|
+ data1: thisItem[index * count],
|
|
|
+ data2: count >= 2 ? thisItem[index * count + 1] : [],
|
|
|
+ data3: count >= 3 ? thisItem[index * count + 2] : [],
|
|
|
+ data4: count >= 4 ? thisItem[index * count + 3] : [],
|
|
|
+ data5: count >= 5 ? thisItem[index * count + 4] : [],
|
|
|
+ is_light: false
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ Object.keys(fzy).map((key) => {
|
|
|
+ fzyArr.push(fzy[key])
|
|
|
+ })
|
|
|
+ Object.keys(jfpl).map((key) => {
|
|
|
+ jfplArr.push(jfpl[key])
|
|
|
+ })
|
|
|
+ fzyArr.pop();
|
|
|
+ var jfplName = jfplArr.pop();
|
|
|
+ var indicator = ["北", "北北西", "北西", "西北西", "西", "西南西", "南西", "南南西", "南", "南南东", "东南", "东南东",
|
|
|
+ "东", "东北东", "北东", "北北东"
|
|
|
+ ];
|
|
|
+
|
|
|
+ var fzyDataArr = [];
|
|
|
+ fzyArr.forEach((item, index) => {
|
|
|
+ var arr = [];
|
|
|
+ item.forEach((e, i) => {
|
|
|
+ arr.push(e.value)
|
|
|
+ });
|
|
|
+ fzyDataArr.push([{
|
|
|
+ indicator: indicator,
|
|
|
+ data: [{
|
|
|
+ value: arr
|
|
|
+ }],
|
|
|
+ name: jfplArr[index]
|
|
|
+ }])
|
|
|
+ });
|
|
|
+ that.fzyData = fzyDataArr;
|
|
|
+ that.tableData.data = data2;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ that.API.requestData({
|
|
|
+ method: "GET",
|
|
|
+ baseURL: "http://10.155.32.4:9001/",
|
|
|
+ subUrl: "benchmarking/djhxdbbottom",
|
|
|
+ data: {
|
|
|
+ wpid: that.value1,
|
|
|
+ wtids: that.value2,
|
|
|
+ date: that.value4
|
|
|
+ },
|
|
|
+ success(res) {
|
|
|
+ var data = res.data;
|
|
|
+
|
|
|
+ var arrName = [],
|
|
|
+ arrKey = [],
|
|
|
+ arrData = [],
|
|
|
+ tempArray = [];
|
|
|
+ data.forEach(ele => {
|
|
|
+ for (let key in ele) {
|
|
|
+ if (key !== "name") {
|
|
|
+ arrKey.push(key)
|
|
|
+ arrData.push(ele[key])
|
|
|
+ } else {
|
|
|
+ arrName.push(ele[key])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ that.listName = arrName;
|
|
|
+ for (var i = 0; i < arrKey.length - 1; i++) { //冒泡排序
|
|
|
+ for (var j = 0; j < arrKey.length - 1 - i; j++) {
|
|
|
+ if (parseInt(arrKey[j]) > parseInt(arrKey[j + 1])) {
|
|
|
+ var temp = arrKey[j];
|
|
|
+ arrKey[j] = arrKey[j + 1];
|
|
|
+ arrKey[j + 1] = temp;
|
|
|
+ var temp2 = arrData[j];
|
|
|
+ arrData[j] = arrData[j + 1];
|
|
|
+ arrData[j + 1] = temp2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ for (var i = 0; i < data.length; i++) {
|
|
|
+ var arr = [];
|
|
|
+ arrData.forEach((e, index) => {
|
|
|
+ if ((index * data.length + i) < arrData.length) {
|
|
|
+ arr.push({
|
|
|
+ text: arrKey[index * data.length + i],
|
|
|
+ value: arrData[index * data.length + i],
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ tempArray.push({
|
|
|
+ title: arrName[i],
|
|
|
+ value: arr
|
|
|
+ })
|
|
|
+ }
|
|
|
+ that.list = tempArray
|
|
|
+ }
|
|
|
+
|
|
|
+ });
|
|
|
+ },
|
|
|
+ reset() { //重置
|
|
|
+ this.value1 = [];
|
|
|
+ this.value2 = [];
|
|
|
+ this.value4 = this.getTime(1);
|
|
|
+ this.AjaxCommon();
|
|
|
+ },
|
|
|
+ TypeClick(val) {
|
|
|
+ this.TypeClass = val;
|
|
|
+ // 重置状态start
|
|
|
+ this.value1 = [];
|
|
|
+ this.value2 = [];
|
|
|
+ this.value4 = this.getTime(1);
|
|
|
+ this.ajaxName=this.ajaxArr[val];
|
|
|
this.AjaxCommon();
|
|
|
- this.XianLuVal(val);
|
|
|
- this.clearDb();
|
|
|
+ // 重置状态end
|
|
|
},
|
|
|
}
|
|
|
};
|
|
@@ -360,4 +486,28 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .hide {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg-1 {
|
|
|
+ background: #05bb4c
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg-2 {
|
|
|
+ background: #f8de5b
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg-3 {
|
|
|
+ background: #4b55ae
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg-4 {
|
|
|
+ background: #fa8c16
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg-5 {
|
|
|
+ background: #1DA0D7
|
|
|
+ }
|
|
|
</style>
|