|
|
@@ -0,0 +1,454 @@
|
|
|
+<template>
|
|
|
+ <el-container>
|
|
|
+ <el-header>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-card style="height: 30px;">
|
|
|
+ <el-page-header @back="queryApDataMx" content="明细信息界面" style="margin-top:-16px"> </el-page-header>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-header>
|
|
|
+
|
|
|
+ <el-main>
|
|
|
+ <el-card>
|
|
|
+ <el-form :inline="true" :model="formInline" class="demo-form-inline">
|
|
|
+ <el-row :gutter="1">
|
|
|
+ <el-form-item label="风场">
|
|
|
+ <el-input
|
|
|
+ v-model="formInline.windfarm"
|
|
|
+ id="windfarm"
|
|
|
+ placeholder="风场"
|
|
|
+ ></el-input>
|
|
|
+ </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"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ @click="checktime"
|
|
|
+ >
|
|
|
+ </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-tabs
|
|
|
+ v-model="activeName"
|
|
|
+ type="card"
|
|
|
+ @tab-click="handleClick"
|
|
|
+ style="height: 100%; width: 100%"
|
|
|
+ >
|
|
|
+ <el-tab-pane label="风场" name="first" id="fc">
|
|
|
+ <el-row
|
|
|
+ style="
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <el-card
|
|
|
+ shadow="always"
|
|
|
+ style="
|
|
|
+ height: 440px;
|
|
|
+ width: 45%;
|
|
|
+ display: table-cell;
|
|
|
+ vertical-align: middle;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ id="chartLineBox"
|
|
|
+ style="width: 800px; height: 400px; margin: auto"
|
|
|
+ ></div>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <el-card shadow="always" style="width: 45%" height="400px">
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ style="width: 100%"
|
|
|
+ max-height="400px"
|
|
|
+ >
|
|
|
+ <el-table-column label="项目列表">
|
|
|
+ <el-table-column fixed type="index" width="45">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="date" label="名称" width="150">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="name" label="理论发电量" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="province"
|
|
|
+ label="SCADA发电量"
|
|
|
+ width="120"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="city" label="风速" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="address"
|
|
|
+ label="非计划检修"
|
|
|
+ width="300"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="zip" label="计划检修" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="zip" label="受累" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="zip" label="限电" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="zip" label="性能" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="zip" label="风能利用率%" width="120">
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <!-- <el-table-column fixed="right" label="受累" width="120">
|
|
|
+ </el-table-column> -->
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-card>
|
|
|
+ </el-row>
|
|
|
+ </el-tab-pane>
|
|
|
+
|
|
|
+ <el-tab-pane label="项目" name="second" id="xm"> </el-tab-pane>
|
|
|
+
|
|
|
+ <el-tab-pane label="集电线路" name="third" id="jcxl"> </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </el-card>
|
|
|
+ </el-main>
|
|
|
+ </el-container>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import * as echarts from "echarts";
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ formInline: {
|
|
|
+ windfarm: "",
|
|
|
+ project: "",
|
|
|
+ line: "",
|
|
|
+ },
|
|
|
+ timedate: "",
|
|
|
+ activeName: "second",
|
|
|
+ tableData: [
|
|
|
+ {
|
|
|
+ date: "2016-05-03",
|
|
|
+ name: "王小虎",
|
|
|
+ province: "上海",
|
|
|
+ city: "普陀区",
|
|
|
+ address: "上海市普陀区金沙江路 1518 弄",
|
|
|
+ zip: 200333,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: "2016-05-02",
|
|
|
+ name: "王小虎",
|
|
|
+ province: "上海",
|
|
|
+ city: "普陀区",
|
|
|
+ address: "上海市普陀区金沙江路 1518 弄",
|
|
|
+ zip: 200333,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: "2016-05-04",
|
|
|
+ name: "王小虎",
|
|
|
+ province: "上海",
|
|
|
+ city: "普陀区",
|
|
|
+ address: "上海市普陀区金沙江路 1518 弄",
|
|
|
+ zip: 200333,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: "2016-05-01",
|
|
|
+ name: "王小虎",
|
|
|
+ province: "上海",
|
|
|
+ city: "普陀区",
|
|
|
+ address: "上海市普陀区金沙江路 1518 弄",
|
|
|
+ zip: 200333,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: "2016-05-08",
|
|
|
+ name: "王小虎",
|
|
|
+ province: "上海",
|
|
|
+ city: "普陀区",
|
|
|
+ address: "上海市普陀区金沙江路 1518 弄",
|
|
|
+ zip: 200333,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: "2016-05-06",
|
|
|
+ name: "王小虎",
|
|
|
+ province: "上海",
|
|
|
+ city: "普陀区",
|
|
|
+ address: "上海市普陀区金沙江路 1518 弄",
|
|
|
+ zip: 200333,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: "2016-05-07",
|
|
|
+ name: "王小虎",
|
|
|
+ province: "上海",
|
|
|
+ city: "普陀区",
|
|
|
+ address: "上海市普陀区金沙江路 1518 弄",
|
|
|
+ zip: 200333,
|
|
|
+ },
|
|
|
+ ,
|
|
|
+ {
|
|
|
+ date: "2016-05-07",
|
|
|
+ name: "王小虎",
|
|
|
+ province: "上海",
|
|
|
+ city: "普陀区",
|
|
|
+ address: "上海市普陀区金沙江路 1518 弄",
|
|
|
+ zip: 200333,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: "2016-05-07",
|
|
|
+ name: "王小虎",
|
|
|
+ province: "上海",
|
|
|
+ city: "普陀区",
|
|
|
+ address: "上海市普陀区金沙江路 1518 弄",
|
|
|
+ zip: 200333,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: "2016-05-07",
|
|
|
+ name: "王小虎",
|
|
|
+ province: "上海",
|
|
|
+ city: "普陀区",
|
|
|
+ address: "上海市普陀区金沙江路 1518 弄",
|
|
|
+ zip: 200333,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onSubmit() {
|
|
|
+ console.log("submit!");
|
|
|
+ },
|
|
|
+ handleClick() {},
|
|
|
+ deleteRow(index, rows) {
|
|
|
+ rows.splice(index, 1);
|
|
|
+ },
|
|
|
+ queryApData() {
|
|
|
+ if (this.formInline.line == "") {
|
|
|
+ this.$message.error("请选择路线！");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ checktime() {
|
|
|
+ if (new Date(this.timedate) == null) {
|
|
|
+ this.$message.error("请选择时间");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ queryApDataMx() {
|
|
|
+ this.$router.push({ path: "/performanceList_fan" });
|
|
|
+ },
|
|
|
+ toExcel() {},
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.chartLine = echarts.init(document.getElementById("chartLineBox"));
|
|
|
+ var option;
|
|
|
+
|
|
|
+ option = {
|
|
|
+ title: {
|
|
|
+ text: "风机绩效榜单",
|
|
|
+ left: -6,
|
|
|
+ top: -5,
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 13,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ axisPointer: {
|
|
|
+ // Use axis to trigger tooltip
|
|
|
+ type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: [
|
|
|
+ "实发电量",
|
|
|
+ "计划检修损失",
|
|
|
+ "非计划检修损失",
|
|
|
+ "限电损失",
|
|
|
+ "受累损失",
|
|
|
+ "性能损失",
|
|
|
+ "总和",
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: "3%",
|
|
|
+ right: "4%",
|
|
|
+ bottom: "3%",
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "value",
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "category",
|
|
|
+ data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "实发电量",
|
|
|
+ type: "bar",
|
|
|
+ stack: "total",
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: "series",
|
|
|
+ },
|
|
|
+ data: [320, 302, 301, 334, 390, 330, 320],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "计划检修损失",
|
|
|
+ type: "bar",
|
|
|
+ stack: "total",
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: "series",
|
|
|
+ },
|
|
|
+ data: [120, 132, 101, 134, 90, 230, 210],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "非计划检修损失",
|
|
|
+ type: "bar",
|
|
|
+ stack: "total",
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: "series",
|
|
|
+ },
|
|
|
+ data: [220, 182, 191, 234, 290, 330, 310],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "限电损失",
|
|
|
+ type: "bar",
|
|
|
+ stack: "total",
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: "series",
|
|
|
+ },
|
|
|
+ data: [150, 212, 201, 154, 190, 330, 410],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "受累损失",
|
|
|
+ type: "bar",
|
|
|
+ stack: "total",
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: "series",
|
|
|
+ },
|
|
|
+ data: [820, 832, 901, 934, 1290, 1330, 1320],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "性能损失",
|
|
|
+ type: "bar",
|
|
|
+ stack: "total",
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: "series",
|
|
|
+ },
|
|
|
+ data: [820, 832, 901, 934, 1290, 1330, 1320],
|
|
|
+ },
|
|
|
+ //曲线
|
|
|
+ {
|
|
|
+ name: "总和",
|
|
|
+ data: [2500, 2600, 2700, 2900, 3000, 3500, 4000],
|
|
|
+ type: "line",
|
|
|
+ symbol: "circle",
|
|
|
+ symbolSize: 20,
|
|
|
+ lineStyle: {
|
|
|
+ color: "#5470C6",
|
|
|
+ width: 4,
|
|
|
+ type: "dashed",
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ borderWidth: 3,
|
|
|
+ borderColor: "#EE6666",
|
|
|
+ color: "yellow",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ this.chartLine.setOption(option);
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+.bg-purple-dark {
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+.grid-content {
|
|
|
+ border-radius: 2px;
|
|
|
+ min-height: 36px;
|
|
|
+ margin-top: -15px;
|
|
|
+}
|
|
|
+.item {
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-right: 40px;
|
|
|
+}
|
|
|
+.el-row {
|
|
|
+ margin: 10px;
|
|
|
+}
|
|
|
+.el-page-header__content{
|
|
|
+ font-size: 10px i !important;
|
|
|
+}
|
|
|
+</style>
|
zhaomiao