|
|
@@ -0,0 +1,276 @@
|
|
|
+<template>
|
|
|
+ <div class="stationPowerContro" :class="!theme ? 'themeDark' : 'themeLight'">
|
|
|
+ <div class="stationPowerControSeach">
|
|
|
+ <div class="seach_top">
|
|
|
+ <div class="exceed">
|
|
|
+ <span class="exceedName">月份：</span>
|
|
|
+ <el-date-picker v-model="pickerTime" @change="changeTime" format="YYYY-MM" type="month"
|
|
|
+ placeholder="选择月份" />
|
|
|
+ </div>
|
|
|
+ <el-button type="primary" @click="seachData">计 算</el-button>
|
|
|
+ <el-button @click="exportExcel">导 出</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="stationPowerControTable">
|
|
|
+ <p class="tableTitle">{{titelMonth}}发电量预测(拟合)</p>
|
|
|
+ <span class="tableUnit">单位:m/s,万kwh</span>
|
|
|
+ <div :style="tableHeight">
|
|
|
+ <div class="tablestyle warn-table" style="margin-top: 10px">
|
|
|
+ <!-- :span-method="mergeSameCells" -->
|
|
|
+ <el-table :data="tableData" border style="width: 100%" :max-height="tableMainHeight"
|
|
|
+ ref="stationPowerTable" element-loading-background="rgba(0,0,0,.5)"
|
|
|
+ :header-cell-style="{ 'text-align': 'center' }">
|
|
|
+ <el-table-column prop="name" label="名称" width="200" align="center" fixed>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="time" label="周期" width="73" align="center" fixed>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="日期" align="center">
|
|
|
+ <el-table-column :prop="item.value" :label="index+1" align="center"
|
|
|
+ v-for="(item, index) in 40" :key="index">
|
|
|
+ <template #default="scope">
|
|
|
+ {{scope.row[scope.row.nameEn+(index+1)]}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {} from "../../api/api";
|
|
|
+
|
|
|
+ import jsonData from "./component/stationPowerControl.json";
|
|
|
+ import dayjs from "dayjs";
|
|
|
+ import * as XLSX from 'xlsx'
|
|
|
+ import {
|
|
|
+ saveAs
|
|
|
+ } from 'file-saver'
|
|
|
+ import * as XLSXD from 'xlsx-js-style'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ pickerTime: "",
|
|
|
+ titelMonth: "",
|
|
|
+ tableData: [],
|
|
|
+ tableColumn: [],
|
|
|
+ echartsTheme: "",
|
|
|
+ theme: null,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ "$store.state.theme": {
|
|
|
+ handler: function (newVal, oldVal) {
|
|
|
+ this.theme = newVal;
|
|
|
+ this.echartsTheme = !newVal ? "dark" : "";
|
|
|
+ // this.getStationData();
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.pickerTime = dayjs(new Date()).format("YYYY-MM")
|
|
|
+ this.titelMonth = this.pickerTime.split("-")[0] + "年" + this.pickerTime.split("-")[1] + "月"
|
|
|
+ this.getTableData();
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ tableHeight() {
|
|
|
+ let height = (document.documentElement.clientHeight - 190) / 2 + "px";
|
|
|
+ return {
|
|
|
+ width: "100%",
|
|
|
+ height: height,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ tableMainHeight() {
|
|
|
+ let height = (document.documentElement.clientHeight - 180) + "px";
|
|
|
+ return height
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ changeTime(val) {
|
|
|
+
|
|
|
+ },
|
|
|
+ seachData() {
|
|
|
+ let str = dayjs(this.pickerTime).format("YYYY-MM")
|
|
|
+ this.titelMonth = str.split("-")[0] + "年" + str.split("-")[1] + "月"
|
|
|
+ },
|
|
|
+ exportExcel() {
|
|
|
+ let $e = this.$refs.stationPowerTable.$el
|
|
|
+ try {
|
|
|
+ let $table = $e.querySelector('.el-table__fixed')
|
|
|
+ if (!$table) {
|
|
|
+ $table = $e
|
|
|
+ }
|
|
|
+ const wb = XLSX.utils.table_to_book($table, {
|
|
|
+ raw: true
|
|
|
+ })
|
|
|
+
|
|
|
+ const wbout = XLSXD.write(wb, {
|
|
|
+ bookType: 'xlsx',
|
|
|
+ bookSST: true,
|
|
|
+ type: 'array'
|
|
|
+ })
|
|
|
+ saveAs(
|
|
|
+ new Blob([wbout], {
|
|
|
+ type: 'application/octet-stream'
|
|
|
+ }),
|
|
|
+ `场站中长期电量预测数据导出.xlsx`,
|
|
|
+ )
|
|
|
+ } catch (e) {
|
|
|
+ if (typeof console !== 'undefined') console.error(e)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getTableData() {
|
|
|
+ let that = this;
|
|
|
+ this.tableData = jsonData.data
|
|
|
+ },
|
|
|
+ mergeSameCells({
|
|
|
+ row,
|
|
|
+ column,
|
|
|
+ rowIndex,
|
|
|
+ columnIndex
|
|
|
+ }) {
|
|
|
+ if (columnIndex === 0) {
|
|
|
+ const prevRow = this.tableData[rowIndex];
|
|
|
+ if (prevRow && this.tableData[rowIndex + 1] && this.tableData[rowIndex + 1].name === prevRow.name) {
|
|
|
+ if (row.name.indexOf('风速') !== -1) {
|
|
|
+ return {
|
|
|
+ rowspan: 2,
|
|
|
+ colspan: 1,
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return {
|
|
|
+ rowspan: 3,
|
|
|
+ colspan: 1,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // if (columnIndex === 0) {
|
|
|
+ // if (rowIndex % 2 === 0) {
|
|
|
+ // return {
|
|
|
+ // rowspan: 2,
|
|
|
+ // colspan: 1,
|
|
|
+ // }
|
|
|
+ // } else {
|
|
|
+ // return {
|
|
|
+ // rowspan: 0,
|
|
|
+ // colspan: 0,
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+ .stationPowerContro {
|
|
|
+ padding: 0 20px 0 20px;
|
|
|
+
|
|
|
+ .stationPowerControSeach {
|
|
|
+ margin-top: 20px;
|
|
|
+
|
|
|
+ .seach_top {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .exceed {
|
|
|
+ .exceedName {
|
|
|
+ margin-top: 7px;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ margin-right: 20px;
|
|
|
+
|
|
|
+ .el-select,
|
|
|
+ .el-select__wrapper {
|
|
|
+ height: 32px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-date-editor {
|
|
|
+ height: 32px;
|
|
|
+
|
|
|
+ .el-input__icon,
|
|
|
+ .el-range-separator {
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .select-trigger {
|
|
|
+ .el-input {
|
|
|
+ .el-input__wrapper {
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input__suffix {
|
|
|
+ .el-input__icon {
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-button {
|
|
|
+ height: 30px;
|
|
|
+ padding: 0 20px;
|
|
|
+ line-height: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .stationPowerControTable {
|
|
|
+ .tableTitle {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tableUnit {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .themeDark {
|
|
|
+ background-image: none;
|
|
|
+
|
|
|
+ .stationPowerControSeach {
|
|
|
+ .exceedName {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .stationPowerControTable {
|
|
|
+
|
|
|
+ .tableTitle,
|
|
|
+ .tableUnit {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .themeLight {
|
|
|
+ .stationPowerControSeach {
|
|
|
+ .exceedName {
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .stationPowerControTable {
|
|
|
+
|
|
|
+ .tableTitle,
|
|
|
+ .tableUnit {
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+</style>
|
