|
|
@@ -1,432 +1,541 @@
|
|
|
<template>
|
|
|
- <div class="decision-page-1">
|
|
|
- <!-- 查询样式统一处理 样式在 assets/styles/form.less 文件中 -->
|
|
|
- <div class="query mg-b-8">
|
|
|
- <div class="query-items">
|
|
|
- <div class="query-item">
|
|
|
- <div class="lable">场站：</div>
|
|
|
- <div class="search-input">
|
|
|
- <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>
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="query-item">
|
|
|
- <div class="lable">项目：</div>
|
|
|
- <div class="search-input">
|
|
|
- <el-select v-model="value2" @change="XiangMuChange(value2)" multiple placeholder="请选择"
|
|
|
- popper-class="select">
|
|
|
- <el-option v-for="item in XiangMu" :key="item.id" :value="item.id" :label="item.name">
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="query-item">
|
|
|
- <div class="lable">线路：</div>
|
|
|
- <div class="search-input">
|
|
|
- <el-select v-model="value3" @change="XianLuChange(value3)" multiple placeholder="请选择"
|
|
|
- popper-class="select">
|
|
|
- <el-option v-for="item in XianLu" :key="item.id" :label="item.name" :value="item.id">
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="query-item">
|
|
|
- <div class="lable">开始日期：</div>
|
|
|
- <div class="search-input">
|
|
|
- <el-date-picker v-model="value4" @change="BeginChange(value4)" type="date"
|
|
|
- value-format="YYYY-MM-DD" placeholder="选择日期" popper-class="date-select">
|
|
|
- </el-date-picker>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="query-item">
|
|
|
- <div class="lable">结束日期：</div>
|
|
|
- <div class="search-input">
|
|
|
- <el-date-picker v-model="value5" @change="EndChange(value5)" type="date"
|
|
|
- value-format="YYYY-MM-DD" placeholder="选择日期" popper-class="date-select">
|
|
|
- </el-date-picker>
|
|
|
- <div class="unit svg-icon svg-icon-gray">
|
|
|
- <svg-icon :svgid="''" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="query-actions">
|
|
|
- <button class="btn green">搜索</button>
|
|
|
- <button class="btn" @click="mxClick()">明细信息</button>
|
|
|
- <button class="btn">导出</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="actions mg-b-8">
|
|
|
- <button class="btn" :class="TypeClass==1?'green':''" @click="TypeClick(1)">风场</button>
|
|
|
- <button class="btn" :class="TypeClass==2?'green':''" @click="TypeClick(2)">项目</button>
|
|
|
- <button class="btn" :class="TypeClass==3?'green':''" @click="TypeClick(3)">集电线路</button>
|
|
|
- </div>
|
|
|
- <el-row :type="'flex'" class="content">
|
|
|
- <el-col :span="12" class="pd-r-8">
|
|
|
- <toolbar-panel title="风机绩效榜" :showLine="false">
|
|
|
- <bar-line-chart :height="'calc(100vh - 200px)'" :bardata="bardata" :lineData="lineData" :color="barColor" lineName="理论发电量"/>
|
|
|
- </toolbar-panel>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12" class="pd-l-8">
|
|
|
- <panel :title="'项目列表'" :showLine="false">
|
|
|
- <div class="project-table">
|
|
|
- <!-- 分页Table -->
|
|
|
- <Table :data="tableData" :pageSize="20" @onPagging="onChangePage" :height="'calc(100vh - 32vh)'"></Table>
|
|
|
- <!-- <Table :data="tableData"></Table> -->
|
|
|
- </div>
|
|
|
- </panel>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
+ <div class="decision-page-1">
|
|
|
+ <!-- 查询样式统一处理 样式在 assets/styles/form.less 文件中 -->
|
|
|
+ <div class="query mg-b-8">
|
|
|
+ <div class="query-items">
|
|
|
+ <div class="query-item">
|
|
|
+ <div class="lable">场站：</div>
|
|
|
+ <div class="search-input">
|
|
|
+ <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>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="query-item">
|
|
|
+ <div class="lable">项目：</div>
|
|
|
+ <div class="search-input">
|
|
|
+ <el-select
|
|
|
+ v-model="value2"
|
|
|
+ @change="XiangMuChange(value2)"
|
|
|
+ multiple
|
|
|
+ placeholder="请选择"
|
|
|
+ popper-class="select"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in XiangMu"
|
|
|
+ :key="item.id"
|
|
|
+ :value="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="query-item">
|
|
|
+ <div class="lable">线路：</div>
|
|
|
+ <div class="search-input">
|
|
|
+ <el-select
|
|
|
+ v-model="value3"
|
|
|
+ @change="XianLuChange(value3)"
|
|
|
+ multiple
|
|
|
+ placeholder="请选择"
|
|
|
+ popper-class="select"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in XianLu"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="query-item">
|
|
|
+ <div class="lable">开始日期：</div>
|
|
|
+ <div class="search-input">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="value4"
|
|
|
+ @change="BeginChange(value4)"
|
|
|
+ type="date"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ placeholder="选择日期"
|
|
|
+ popper-class="date-select"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="query-item">
|
|
|
+ <div class="lable">结束日期：</div>
|
|
|
+ <div class="search-input">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="value5"
|
|
|
+ @change="EndChange(value5)"
|
|
|
+ type="date"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ placeholder="选择日期"
|
|
|
+ popper-class="date-select"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ <div class="unit svg-icon svg-icon-gray">
|
|
|
+ <svg-icon :svgid="''" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="query-actions">
|
|
|
+ <button class="btn green">搜索</button>
|
|
|
+ <button class="btn" @click="mxClick()">明细信息</button>
|
|
|
+ <button class="btn" @click="exportExcel()">导出</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="actions mg-b-8">
|
|
|
+ <button
|
|
|
+ class="btn"
|
|
|
+ :class="TypeClass == 1 ? 'green' : ''"
|
|
|
+ @click="TypeClick(1)"
|
|
|
+ >
|
|
|
+ 风场
|
|
|
+ </button>
|
|
|
+ <button
|
|
|
+ class="btn"
|
|
|
+ :class="TypeClass == 2 ? 'green' : ''"
|
|
|
+ @click="TypeClick(2)"
|
|
|
+ >
|
|
|
+ 项目
|
|
|
+ </button>
|
|
|
+ <button
|
|
|
+ class="btn"
|
|
|
+ :class="TypeClass == 3 ? 'green' : ''"
|
|
|
+ @click="TypeClick(3)"
|
|
|
+ >
|
|
|
+ 集电线路
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <el-row :type="'flex'" class="content">
|
|
|
+ <el-col :span="12" class="pd-r-8">
|
|
|
+ <toolbar-panel title="风机绩效榜" :showLine="false">
|
|
|
+ <bar-line-chart
|
|
|
+ :height="'calc(100vh - 200px)'"
|
|
|
+ :bardata="bardata"
|
|
|
+ :lineData="lineData"
|
|
|
+ :color="barColor"
|
|
|
+ lineName="理论发电量"
|
|
|
+ />
|
|
|
+ </toolbar-panel>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class="pd-l-8">
|
|
|
+ <panel :title="'项目列表'" :showLine="false">
|
|
|
+ <div class="project-table">
|
|
|
+ <!-- 分页Table -->
|
|
|
+ <Table
|
|
|
+ :data="tableData"
|
|
|
+ :pageSize="20"
|
|
|
+ @onPagging="onChangePage"
|
|
|
+ :height="'calc(100vh - 32vh)'"
|
|
|
+ ></Table>
|
|
|
+ <!-- <Table :data="tableData"></Table> -->
|
|
|
+ </div>
|
|
|
+ </panel>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import BarLineChart from "../../components/chart/combination/bar-line-chart.vue";
|
|
|
- import Panel from "../../components/coms/panel/panel.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";
|
|
|
- import partten from "@/helper/partten.js";
|
|
|
- export default {
|
|
|
- components: {
|
|
|
- ToolbarPanel,
|
|
|
- BarLineChart,
|
|
|
- Panel,
|
|
|
- Table,
|
|
|
- partten,
|
|
|
- SvgIcon
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- tableData: {
|
|
|
- column: [{
|
|
|
- name: "",
|
|
|
- field: "index",
|
|
|
- is_num: false,
|
|
|
- is_light: false,
|
|
|
- width: "50px",
|
|
|
- },
|
|
|
- {
|
|
|
- name: "名称",
|
|
|
- field: "name",
|
|
|
- is_num: false,
|
|
|
- is_light: false,
|
|
|
- },
|
|
|
- {
|
|
|
- name: "理论发电量",
|
|
|
- field: "llfdl",
|
|
|
- is_num: false,
|
|
|
- is_light: false,
|
|
|
- sortable:true
|
|
|
- },
|
|
|
- {
|
|
|
- name: "SCADA发电量",
|
|
|
- field: "sjfdl",
|
|
|
- is_num: false,
|
|
|
- is_light: false,
|
|
|
- sortable:true
|
|
|
- },
|
|
|
- {
|
|
|
- name: "风速",
|
|
|
- field: "speed",
|
|
|
- is_num: false,
|
|
|
- is_light: false,
|
|
|
- sortable:true
|
|
|
- },
|
|
|
- {
|
|
|
- name: "非计划检修",
|
|
|
- field: "fjhjx",
|
|
|
- is_num: false,
|
|
|
- is_light: false,
|
|
|
- sortable:true
|
|
|
- },
|
|
|
- {
|
|
|
- name: "计划检修",
|
|
|
- field: "jhjx",
|
|
|
- is_num: false,
|
|
|
- is_light: false,
|
|
|
- sortable:true
|
|
|
- },
|
|
|
- {
|
|
|
- name: "受累",
|
|
|
- field: "sl",
|
|
|
- is_num: false,
|
|
|
- is_light: false,
|
|
|
- sortable:true
|
|
|
- },
|
|
|
- {
|
|
|
- name: "限电",
|
|
|
- field: "xd",
|
|
|
- is_num: false,
|
|
|
- is_light: false,
|
|
|
- sortable:true
|
|
|
- },
|
|
|
- {
|
|
|
- name: "性能",
|
|
|
- field: "xn",
|
|
|
- is_num: false,
|
|
|
- is_light: false,
|
|
|
- sortable:true
|
|
|
- },
|
|
|
- {
|
|
|
- name: "风能利用率%",
|
|
|
- field: "fnlly",
|
|
|
- is_num: false,
|
|
|
- is_light: false,
|
|
|
- sortable:true
|
|
|
- }
|
|
|
- ],
|
|
|
- data: [],
|
|
|
- },
|
|
|
- ChangZhan: [], //场站
|
|
|
- XiangMu: [], //项目
|
|
|
- XianLu: [], //线路
|
|
|
- value1: [],
|
|
|
- value2: [],
|
|
|
- value3: [],
|
|
|
- value4: "",
|
|
|
- value5: "",
|
|
|
- barColor: [partten.getColor("purple"), partten.getColor("orange"), partten.getColor("red"), partten
|
|
|
- .getColor("pink"), partten.getColor("grayl"), partten.getColor("green")
|
|
|
- ],
|
|
|
- TypeClass: 1, //风场，项目，集电线路 的按钮颜色，默认第一个
|
|
|
- bardata: [],
|
|
|
- lineData: [],
|
|
|
- };
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.ChangZhanVal();
|
|
|
- this.value4 = this.getTime(1);
|
|
|
- this.value5 = this.getTime(2);
|
|
|
- this.AjaxCommon();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- ChangZhanVal() {
|
|
|
- var that = this;
|
|
|
- that.API.requestData({
|
|
|
- method: "GET",
|
|
|
- baseURL : "http://10.155.32.4:9001/",
|
|
|
- subUrl: "benchmarking/wplist",
|
|
|
- success(res) {
|
|
|
- that.ChangZhan = res.data;
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- ChangZhanChange(val) {
|
|
|
- this.TypeClass = "";
|
|
|
- this.value1 = val;
|
|
|
- this.value2 = [];
|
|
|
- this.value3 = [];
|
|
|
- this.AjaxCommon();
|
|
|
- this.XiangMuVal(val);
|
|
|
- },
|
|
|
- XiangMuVal(val) {
|
|
|
- var that = this;
|
|
|
- that.API.requestData({
|
|
|
- method: "GET",
|
|
|
- baseURL : "http://10.155.32.4:9001/",
|
|
|
- subUrl: "benchmarking/projectList",
|
|
|
- data: {
|
|
|
- wpids: val
|
|
|
- },
|
|
|
- success(res) {
|
|
|
- that.XiangMu = res.data;
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- XiangMuChange(val) {
|
|
|
- this.TypeClass = "";
|
|
|
- this.value2 = val;
|
|
|
- this.value3 = [];
|
|
|
- this.AjaxCommon();
|
|
|
- this.XianLuVal(val);
|
|
|
- },
|
|
|
- XianLuVal(val) {
|
|
|
- var that = this;
|
|
|
- that.API.requestData({
|
|
|
- method: "GET",
|
|
|
- baseURL : "http://10.155.32.4:9001/",
|
|
|
- subUrl: "benchmarking/lineList",
|
|
|
- data: {
|
|
|
- projects: val
|
|
|
- },
|
|
|
- success(res) {
|
|
|
- that.XianLu = res.data;
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- XianLuChange(val) {
|
|
|
- this.TypeClass = "";
|
|
|
- this.value3 = val;
|
|
|
- this.AjaxCommon();
|
|
|
- },
|
|
|
- BeginChange(val) {
|
|
|
- this.value4 = val;
|
|
|
- this.AjaxCommon();
|
|
|
- },
|
|
|
- EndChange(val) {
|
|
|
- this.value5 = val;
|
|
|
- this.AjaxCommon();
|
|
|
- },
|
|
|
- TypeClick(val) {
|
|
|
- this.TypeClass = val;
|
|
|
- // 重置状态start
|
|
|
- this.value1 = [];
|
|
|
- this.value2 = [];
|
|
|
- this.value3 = [];
|
|
|
- this.value4 = this.getTime(1);
|
|
|
- this.value5 = this.getTime(2);
|
|
|
- this.AjaxCommon();
|
|
|
- // 重置状态end
|
|
|
- },
|
|
|
- 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/fjjxb",
|
|
|
- data: {
|
|
|
- wpids: that.value1,
|
|
|
- projectids: that.value2,
|
|
|
- lineids: that.value3,
|
|
|
- beginDate: that.value4,
|
|
|
- endDate: that.value5,
|
|
|
- type: that.TypeClass,
|
|
|
- target: '',
|
|
|
- sort: ''
|
|
|
- },
|
|
|
- success(res) {
|
|
|
- console.log(res)
|
|
|
- var name = [],
|
|
|
- data = [],
|
|
|
- llfdl = [],
|
|
|
- legend = ["实际电量", "计划检修损失", "非计划检修损失", "限电损失", "受累损失", "性能损失"],
|
|
|
- data2 = []; //项目列表
|
|
|
- res.data.forEach((item, index) => {
|
|
|
- name.push(item.name);
|
|
|
- data.push([item.sjfdl, item.jhjx, item.fjhjx, item.xd, item.sl, item.xn])
|
|
|
- llfdl.push(item.llfdl);
|
|
|
- data2.push({
|
|
|
- index: index + 1,
|
|
|
- name: item.name,
|
|
|
- llfdl: item.llfdl,
|
|
|
- sjfdl: item.sjfdl,
|
|
|
- speed: item.speed,
|
|
|
- fjhjx: item.fjhjx,
|
|
|
- jhjx: item.jhjx,
|
|
|
- sl: item.sl,
|
|
|
- xd: item.xd,
|
|
|
- xn: item.xn,
|
|
|
- fnlly: item.fnlly,
|
|
|
- is_light: false
|
|
|
- })
|
|
|
- })
|
|
|
- name.pop();
|
|
|
- data.pop();
|
|
|
- llfdl.pop();
|
|
|
- if (data.length > 0) {
|
|
|
- let arr1 = [];
|
|
|
- const length = data[0].length;
|
|
|
- for (var i = 0; i < length; i++) {
|
|
|
- let arr2 = [];
|
|
|
- data.forEach(ele => {
|
|
|
- arr2.push(ele[i])
|
|
|
- });
|
|
|
- arr1.push(arr2);
|
|
|
- }
|
|
|
- that.lineData = llfdl;
|
|
|
- that.bardata = {
|
|
|
- area: name,
|
|
|
- legend: legend,
|
|
|
- data: arr1
|
|
|
- };
|
|
|
+import BarLineChart from "../../components/chart/combination/bar-line-chart.vue";
|
|
|
+import Panel from "../../components/coms/panel/panel.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";
|
|
|
+import partten from "@/helper/partten.js";
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ ToolbarPanel,
|
|
|
+ BarLineChart,
|
|
|
+ Panel,
|
|
|
+ Table,
|
|
|
+ partten,
|
|
|
+ SvgIcon,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tableData: {
|
|
|
+ column: [
|
|
|
+ {
|
|
|
+ name: "",
|
|
|
+ field: "index",
|
|
|
+ is_num: false,
|
|
|
+ is_light: false,
|
|
|
+ width: "50px",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "名称",
|
|
|
+ field: "name",
|
|
|
+ is_num: false,
|
|
|
+ is_light: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "理论发电量",
|
|
|
+ field: "llfdl",
|
|
|
+ is_num: false,
|
|
|
+ is_light: false,
|
|
|
+ sortable: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "SCADA发电量",
|
|
|
+ field: "sjfdl",
|
|
|
+ is_num: false,
|
|
|
+ is_light: false,
|
|
|
+ sortable: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "风速",
|
|
|
+ field: "speed",
|
|
|
+ is_num: false,
|
|
|
+ is_light: false,
|
|
|
+ sortable: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "非计划检修",
|
|
|
+ field: "fjhjx",
|
|
|
+ is_num: false,
|
|
|
+ is_light: false,
|
|
|
+ sortable: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "计划检修",
|
|
|
+ field: "jhjx",
|
|
|
+ is_num: false,
|
|
|
+ is_light: false,
|
|
|
+ sortable: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "受累",
|
|
|
+ field: "sl",
|
|
|
+ is_num: false,
|
|
|
+ is_light: false,
|
|
|
+ sortable: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "限电",
|
|
|
+ field: "xd",
|
|
|
+ is_num: false,
|
|
|
+ is_light: false,
|
|
|
+ sortable: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "性能",
|
|
|
+ field: "xn",
|
|
|
+ is_num: false,
|
|
|
+ is_light: false,
|
|
|
+ sortable: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "风能利用率%",
|
|
|
+ field: "fnlly",
|
|
|
+ is_num: false,
|
|
|
+ is_light: false,
|
|
|
+ sortable: true,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ ChangZhan: [], //场站
|
|
|
+ XiangMu: [], //项目
|
|
|
+ XianLu: [], //线路
|
|
|
+ value1: [],
|
|
|
+ value2: [],
|
|
|
+ value3: [],
|
|
|
+ value4: "",
|
|
|
+ value5: "",
|
|
|
+ barColor: [
|
|
|
+ partten.getColor("purple"),
|
|
|
+ partten.getColor("orange"),
|
|
|
+ partten.getColor("red"),
|
|
|
+ partten.getColor("pink"),
|
|
|
+ partten.getColor("grayl"),
|
|
|
+ partten.getColor("green"),
|
|
|
+ ],
|
|
|
+ TypeClass: 1, //风场，项目，集电线路 的按钮颜色，默认第一个
|
|
|
+ bardata: [],
|
|
|
+ lineData: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.ChangZhanVal();
|
|
|
+ this.value4 = this.getTime(1);
|
|
|
+ this.value5 = this.getTime(2);
|
|
|
+ this.AjaxCommon();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ChangZhanVal() {
|
|
|
+ var that = this;
|
|
|
+ that.API.requestData({
|
|
|
+ method: "GET",
|
|
|
+ baseURL: "http://10.155.32.4:9001/",
|
|
|
+ subUrl: "benchmarking/wplist",
|
|
|
+ success(res) {
|
|
|
+ that.ChangZhan = res.data;
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ ChangZhanChange(val) {
|
|
|
+ this.TypeClass = "";
|
|
|
+ this.value1 = val;
|
|
|
+ this.value2 = [];
|
|
|
+ this.value3 = [];
|
|
|
+ this.AjaxCommon();
|
|
|
+ this.XiangMuVal(val);
|
|
|
+ },
|
|
|
+ XiangMuVal(val) {
|
|
|
+ var that = this;
|
|
|
+ that.API.requestData({
|
|
|
+ method: "GET",
|
|
|
+ baseURL: "http://10.155.32.4:9001/",
|
|
|
+ subUrl: "benchmarking/projectList",
|
|
|
+ data: {
|
|
|
+ wpids: val,
|
|
|
+ },
|
|
|
+ success(res) {
|
|
|
+ that.XiangMu = res.data;
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ XiangMuChange(val) {
|
|
|
+ this.TypeClass = "";
|
|
|
+ this.value2 = val;
|
|
|
+ this.value3 = [];
|
|
|
+ this.AjaxCommon();
|
|
|
+ this.XianLuVal(val);
|
|
|
+ },
|
|
|
+ XianLuVal(val) {
|
|
|
+ var that = this;
|
|
|
+ that.API.requestData({
|
|
|
+ method: "GET",
|
|
|
+ baseURL: "http://10.155.32.4:9001/",
|
|
|
+ subUrl: "benchmarking/lineList",
|
|
|
+ data: {
|
|
|
+ projects: val,
|
|
|
+ },
|
|
|
+ success(res) {
|
|
|
+ that.XianLu = res.data;
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ XianLuChange(val) {
|
|
|
+ this.TypeClass = "";
|
|
|
+ this.value3 = val;
|
|
|
+ this.AjaxCommon();
|
|
|
+ },
|
|
|
+ BeginChange(val) {
|
|
|
+ this.value4 = val;
|
|
|
+ this.AjaxCommon();
|
|
|
+ },
|
|
|
+ EndChange(val) {
|
|
|
+ this.value5 = val;
|
|
|
+ this.AjaxCommon();
|
|
|
+ },
|
|
|
+ TypeClick(val) {
|
|
|
+ this.TypeClass = val;
|
|
|
+ // 重置状态start
|
|
|
+ this.value1 = [];
|
|
|
+ this.value2 = [];
|
|
|
+ this.value3 = [];
|
|
|
+ this.value4 = this.getTime(1);
|
|
|
+ this.value5 = this.getTime(2);
|
|
|
+ this.AjaxCommon();
|
|
|
+ // 重置状态end
|
|
|
+ },
|
|
|
+ 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/fjjxb",
|
|
|
+ data: {
|
|
|
+ wpids: that.value1,
|
|
|
+ projectids: that.value2,
|
|
|
+ lineids: that.value3,
|
|
|
+ beginDate: that.value4,
|
|
|
+ endDate: that.value5,
|
|
|
+ type: that.TypeClass,
|
|
|
+ target: "",
|
|
|
+ sort: "",
|
|
|
+ },
|
|
|
+ success(res) {
|
|
|
+ var name = [],
|
|
|
+ data = [],
|
|
|
+ llfdl = [],
|
|
|
+ legend = [
|
|
|
+ "实际电量",
|
|
|
+ "计划检修损失",
|
|
|
+ "非计划检修损失",
|
|
|
+ "限电损失",
|
|
|
+ "受累损失",
|
|
|
+ "性能损失",
|
|
|
+ ],
|
|
|
+ data2 = []; //项目列表
|
|
|
+ res.data.forEach((item, index) => {
|
|
|
+ name.push(item.name);
|
|
|
+ data.push([
|
|
|
+ item.sjfdl,
|
|
|
+ item.jhjx,
|
|
|
+ item.fjhjx,
|
|
|
+ item.xd,
|
|
|
+ item.sl,
|
|
|
+ item.xn,
|
|
|
+ ]);
|
|
|
+ llfdl.push(item.llfdl);
|
|
|
+ data2.push({
|
|
|
+ index: index + 1,
|
|
|
+ name: item.name,
|
|
|
+ llfdl: item.llfdl,
|
|
|
+ sjfdl: item.sjfdl,
|
|
|
+ speed: item.speed,
|
|
|
+ fjhjx: item.fjhjx,
|
|
|
+ jhjx: item.jhjx,
|
|
|
+ sl: item.sl,
|
|
|
+ xd: item.xd,
|
|
|
+ xn: item.xn,
|
|
|
+ fnlly: item.fnlly,
|
|
|
+ is_light: false,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ name.pop();
|
|
|
+ data.pop();
|
|
|
+ llfdl.pop();
|
|
|
+ if (data.length > 0) {
|
|
|
+ let arr1 = [];
|
|
|
+ const length = data[0].length;
|
|
|
+ for (var i = 0; i < length; i++) {
|
|
|
+ let arr2 = [];
|
|
|
+ data.forEach((ele) => {
|
|
|
+ arr2.push(ele[i]);
|
|
|
+ });
|
|
|
+ arr1.push(arr2);
|
|
|
+ }
|
|
|
+ that.lineData = llfdl;
|
|
|
+ that.bardata = {
|
|
|
+ area: name,
|
|
|
+ legend: legend,
|
|
|
+ data: arr1,
|
|
|
+ };
|
|
|
+ }
|
|
|
+ that.tableData.data = data2;
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ mxClick() {
|
|
|
+ this.$router.push("/decision/decision1Mx");
|
|
|
+ },
|
|
|
+ formatJson(filterVal, jsonData) {
|
|
|
+ return jsonData.map((v) => filterVal.map((j) => v[j]));
|
|
|
+ },
|
|
|
+ exportExcel() {
|
|
|
+ let that = this;
|
|
|
+ const { export_json_to_excel } = require("@tools/excel/Export2Excel.js"); // 注意这个Export2Excel路径
|
|
|
+ let tHeader = []; // 上面设置Excel的表格第一行的标题
|
|
|
+ let filterVal = []; // 上面的index、nickName、name是tableData里对象的属性key值
|
|
|
+
|
|
|
+ that.tableData.column.forEach((ele) => {
|
|
|
+ tHeader.push(ele.name);
|
|
|
+ filterVal.push(ele.field);
|
|
|
+ });
|
|
|
|
|
|
- }
|
|
|
- that.tableData.data = data2;
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- mxClick() {
|
|
|
- this.$router.push("/decision/decision1Mx")
|
|
|
- },
|
|
|
- onChangePage(params) {
|
|
|
- console.log(params);
|
|
|
+ var list = [];
|
|
|
+ that.tableData.data.forEach((i, index) => {
|
|
|
+ list.push(i);
|
|
|
+ });
|
|
|
+ list.push(that.tableDataEnd);
|
|
|
+ const data = that.formatJson(filterVal, list);
|
|
|
+ export_json_to_excel(tHeader, data, "导出的Excel"); // 最后一个是表名字
|
|
|
},
|
|
|
- }
|
|
|
- };
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less">
|
|
|
- .decision-page-1 {
|
|
|
- .com-panel .panel-title {
|
|
|
- line-height: 3.4259vh;
|
|
|
- }
|
|
|
+.decision-page-1 {
|
|
|
+ .com-panel .panel-title {
|
|
|
+ line-height: 3.4259vh;
|
|
|
+ }
|
|
|
|
|
|
- .tools {
|
|
|
- display: flex;
|
|
|
- line-height: 3.4259vh;
|
|
|
+ .tools {
|
|
|
+ display: flex;
|
|
|
+ line-height: 3.4259vh;
|
|
|
|
|
|
- .tool-block {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-left: 0.741vh;
|
|
|
+ .tool-block {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 0.741vh;
|
|
|
|
|
|
- .legend {
|
|
|
- flex: auto;
|
|
|
- width: 0.741vh;
|
|
|
- height: 0.741vh;
|
|
|
- margin-right: 0.741vh;
|
|
|
+ .legend {
|
|
|
+ flex: auto;
|
|
|
+ width: 0.741vh;
|
|
|
+ height: 0.741vh;
|
|
|
+ margin-right: 0.741vh;
|
|
|
|
|
|
- &.long {
|
|
|
- width: 2.963vh;
|
|
|
- height: 0.37vh;
|
|
|
- }
|
|
|
- }
|
|
|
+ &.long {
|
|
|
+ width: 2.963vh;
|
|
|
+ height: 0.37vh;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .legend-text {
|
|
|
- color: @gray-l;
|
|
|
- font-size: @fontsize-s;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .legend-text {
|
|
|
+ color: @gray-l;
|
|
|
+ font-size: @fontsize-s;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .project-table {
|
|
|
- overflow: auto;
|
|
|
+ .project-table {
|
|
|
+ overflow: auto;
|
|
|
|
|
|
- tbody {
|
|
|
- height: calc(100vh - 24.5vh);
|
|
|
- }
|
|
|
+ tbody {
|
|
|
+ height: calc(100vh - 24.5vh);
|
|
|
+ }
|
|
|
|
|
|
- td {
|
|
|
- color: #b2bdc0;
|
|
|
- }
|
|
|
- }
|
|
|
+ td {
|
|
|
+ color: #b2bdc0;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .contentMx {
|
|
|
- width: 100%;
|
|
|
- overflow-x: auto;
|
|
|
- }
|
|
|
+ .contentMx {
|
|
|
+ width: 100%;
|
|
|
+ overflow-x: auto;
|
|
|
+ }
|
|
|
|
|
|
- .activeMx {
|
|
|
- width: 150%;
|
|
|
- }
|
|
|
- }
|
|
|
+ .activeMx {
|
|
|
+ width: 150%;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
Koishi