能源需求修改
This commit is contained in:
@@ -1,148 +1,149 @@
|
||||
<template>
|
||||
<div
|
||||
id="analysischartBar"
|
||||
style="width: 100%"
|
||||
:style="{ height: chartHeight + 'px' }"
|
||||
></div>
|
||||
<div
|
||||
id="analysischartBar"
|
||||
style="width: 100%"
|
||||
:style="{ height: chartHeight + 'px' }"></div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import resize from '@/utils/chartMixins/resize'
|
||||
import * as echarts from 'echarts';
|
||||
import resize from '@/utils/chartMixins/resize';
|
||||
export default {
|
||||
name: "BarChart",
|
||||
mixins: [resize],
|
||||
data() {
|
||||
return {
|
||||
chartDom: '',
|
||||
chart: '',
|
||||
chartHeight: this.tableHeight(214) - 70
|
||||
}
|
||||
},
|
||||
props: {
|
||||
chartData: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
timeDim: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
chartData: function () {
|
||||
this.getChart()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', () => {
|
||||
this.chartHeight = this.tableHeight(214) - 70
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getChart() {
|
||||
if (
|
||||
this.chart !== null &&
|
||||
this.chart !== '' &&
|
||||
this.chart !== undefined
|
||||
) {
|
||||
this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
|
||||
}
|
||||
this.chartDom = document.getElementById('analysischartBar')
|
||||
this.chart = echarts.init(this.chartDom)
|
||||
let tempArr = []
|
||||
let xData = []
|
||||
let yData = []
|
||||
let legendData = []
|
||||
if (this.chartData.length === 0) {
|
||||
return false
|
||||
} else {
|
||||
tempArr = this.chartData[0].trendRespVOList
|
||||
}
|
||||
for (let k = 0; k < tempArr.length; k++) {
|
||||
let time = ''
|
||||
if (this.timeDim === '3') {
|
||||
let year = tempArr[k].time.slice(0,4)
|
||||
let weak = tempArr[k].time.slice(4,6)
|
||||
time = year+' 第 '+weak+' 周'
|
||||
} else {
|
||||
time = tempArr[k].time
|
||||
}
|
||||
xData.push(time)
|
||||
}
|
||||
for (let i = 0; i < this.chartData.length; i++) {
|
||||
let obj = {
|
||||
name: this.chartData[i].objName + this.chartData[i].objCode,
|
||||
type: 'bar',
|
||||
barMaxWidth: 20,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
},
|
||||
data: []
|
||||
}
|
||||
legendData.push(this.chartData[i].objName + this.chartData[i].objCode)
|
||||
let temp = this.chartData[i].trendRespVOList
|
||||
for (let j = 0; j < temp.length; j++) {
|
||||
let num = temp[j].useNum ? temp[j].useNum : ''
|
||||
obj.data.push(num)
|
||||
}
|
||||
yData.push(obj)
|
||||
}
|
||||
var option = {
|
||||
color:['#FFDC94','#8EF0AB','#63BDFF','#288AFF','#7164FF'],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
formatter: function(params) {
|
||||
return (
|
||||
params[0].axisValue +
|
||||
`<br>` +
|
||||
params.map((item) => {
|
||||
let str = `<span style="display:inline-block;width:8px;height:8px;margin: 0 8px 0 -3px;border-radius:2px;background-color:${item.color};"></span>`
|
||||
let seriesNameStr = `<span style="display:inline-block;">${item.seriesName}</span>`
|
||||
let value = item.value ? item.value : '-'
|
||||
let valueStr = `<span style="display:inline-block;margin-left:10px;color:rgba(0,0,0,0.45);">${value}</span>`
|
||||
return `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
|
||||
name: 'BarChart',
|
||||
mixins: [resize],
|
||||
data() {
|
||||
return {
|
||||
chartDom: '',
|
||||
chart: '',
|
||||
chartHeight: this.tableHeight(250) / 2,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
chartData: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
timeDim: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
chartData: function () {
|
||||
this.getChart();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', () => {
|
||||
this.chartHeight = this.tableHeight(250) / 2;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
getChart() {
|
||||
if (
|
||||
this.chart !== null &&
|
||||
this.chart !== '' &&
|
||||
this.chart !== undefined
|
||||
) {
|
||||
this.chart.dispose(); // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
|
||||
}
|
||||
this.chartDom = document.getElementById('analysischartBar');
|
||||
this.chart = echarts.init(this.chartDom);
|
||||
let tempArr = [];
|
||||
let xData = [];
|
||||
let yData = [];
|
||||
let legendData = [];
|
||||
if (this.chartData.length === 0) {
|
||||
return false;
|
||||
} else {
|
||||
tempArr = this.chartData[0].trendRespVOList;
|
||||
}
|
||||
for (let k = 0; k < tempArr.length; k++) {
|
||||
let time = '';
|
||||
if (this.timeDim === '3') {
|
||||
let year = tempArr[k].time.slice(0, 4);
|
||||
let weak = tempArr[k].time.slice(4, 6);
|
||||
time = year + ' 第 ' + weak + ' 周';
|
||||
} else {
|
||||
time = tempArr[k].time;
|
||||
}
|
||||
xData.push(time);
|
||||
}
|
||||
for (let i = 0; i < this.chartData.length; i++) {
|
||||
let obj = {
|
||||
name: this.chartData[i].objName + this.chartData[i].objCode,
|
||||
type: 'bar',
|
||||
barMaxWidth: 20,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
},
|
||||
data: [],
|
||||
};
|
||||
legendData.push(this.chartData[i].objName + this.chartData[i].objCode);
|
||||
let temp = this.chartData[i].trendRespVOList;
|
||||
for (let j = 0; j < temp.length; j++) {
|
||||
let num = temp[j].useNum ? temp[j].useNum.toFixed(2) : '';
|
||||
obj.data.push(num);
|
||||
}
|
||||
yData.push(obj);
|
||||
}
|
||||
var option = {
|
||||
color: ['#FFDC94', '#8EF0AB', '#63BDFF', '#288AFF', '#7164FF'],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
formatter: function (params) {
|
||||
return (
|
||||
params[0].axisValue +
|
||||
`<br>` +
|
||||
params
|
||||
.map((item) => {
|
||||
let str = `<span style="display:inline-block;width:8px;height:8px;margin: 0 8px 0 -3px;border-radius:2px;background-color:${item.color};"></span>`;
|
||||
let seriesNameStr = `<span style="display:inline-block;">${item.seriesName}</span>`;
|
||||
let value = item.value ? item.value : '-';
|
||||
let valueStr = `<span style="display:inline-block;margin-left:10px;color:rgba(0,0,0,0.45);">${value}</span>`;
|
||||
return `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
|
||||
<span>${str}${seriesNameStr}</span>
|
||||
<span>${valueStr}</span>
|
||||
</span>`
|
||||
}).join(``)
|
||||
)
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '4%',
|
||||
right: '1%',
|
||||
bottom: '1%',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
data: legendData,
|
||||
right: '1%',
|
||||
icon: 'rect',
|
||||
itemHeight: 8,
|
||||
itemWidth: 8
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xData,
|
||||
axisLabel: {
|
||||
rotate: "45"
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: yData
|
||||
};
|
||||
</span>`;
|
||||
})
|
||||
.join(``)
|
||||
);
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '4%',
|
||||
right: '1%',
|
||||
bottom: '1%',
|
||||
containLabel: true,
|
||||
},
|
||||
legend: {
|
||||
data: legendData,
|
||||
right: '1%',
|
||||
icon: 'rect',
|
||||
itemHeight: 8,
|
||||
itemWidth: 8,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xData,
|
||||
axisLabel: {
|
||||
rotate: '45',
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: yData,
|
||||
};
|
||||
|
||||
option && this.chart.setOption(option);
|
||||
}
|
||||
}
|
||||
}
|
||||
option && this.chart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,126 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
id="analysischartLine"
|
||||
style="width: 100%"
|
||||
:style="{ height: chartHeight + 'px' }"
|
||||
></div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import resize from '@/utils/chartMixins/resize'
|
||||
export default {
|
||||
name: "LineChart",
|
||||
mixins: [resize],
|
||||
data() {
|
||||
return {
|
||||
chartDom: '',
|
||||
chart: '',
|
||||
chartHeight: this.tableHeight(214) - 70
|
||||
}
|
||||
},
|
||||
props: {
|
||||
chartData: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
timeDim: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
chartData: function () {
|
||||
this.getChart()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', () => {
|
||||
this.chartHeight = this.tableHeight(214) - 70
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getChart() {
|
||||
if (
|
||||
this.chart !== null &&
|
||||
this.chart !== '' &&
|
||||
this.chart !== undefined
|
||||
) {
|
||||
this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
|
||||
}
|
||||
this.chartDom = document.getElementById('analysischartLine')
|
||||
this.chart = echarts.init(this.chartDom)
|
||||
let tempArr = []
|
||||
let xData = []
|
||||
let yData = []
|
||||
let legendData = []
|
||||
if (this.chartData.length === 0) {
|
||||
return false
|
||||
} else {
|
||||
tempArr = this.chartData[0].trendRespVOList
|
||||
}
|
||||
for (let k = 0; k < tempArr.length; k++) {
|
||||
let time = ''
|
||||
if (this.timeDim === '3') {
|
||||
let year = tempArr[k].time.slice(0,4)
|
||||
let weak = tempArr[k].time.slice(4,6)
|
||||
time = year+' 第 '+weak+' 周'
|
||||
} else {
|
||||
time = tempArr[k].time
|
||||
}
|
||||
xData.push(time)
|
||||
}
|
||||
for (let i = 0; i < this.chartData.length; i++) {
|
||||
let obj = {
|
||||
name: this.chartData[i].objName + this.chartData[i].objCode,
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: []
|
||||
}
|
||||
legendData.push(this.chartData[i].objName + this.chartData[i].objCode)
|
||||
let temp = this.chartData[i].trendRespVOList
|
||||
for (let j = 0; j < temp.length; j++) {
|
||||
let num = temp[j].useNum ? temp[j].useNum : ''
|
||||
obj.data.push(num)
|
||||
}
|
||||
yData.push(obj)
|
||||
}
|
||||
|
||||
var option = {
|
||||
color:['#FFDC94','#8EF0AB','#63BDFF','#288AFF','#7164FF'],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '4%',
|
||||
right: '1%',
|
||||
bottom: '1%',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
data: legendData,
|
||||
right: '1%'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xData,
|
||||
axisLabel: {
|
||||
rotate: "45"
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: yData
|
||||
};
|
||||
|
||||
option && this.chart.setOption(option);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,96 +1,129 @@
|
||||
<template>
|
||||
<div class="app-container contrastAnalysisBox" id="contrastAnalysisBox">
|
||||
<!-- 搜索工作栏 -->
|
||||
<search-area :isFold="isFold" @submit="getList"/>
|
||||
<el-tabs v-model="activeName" @tab-click="switchChart" v-show='chartData.length'>
|
||||
<el-tab-pane label="柱状图" name="bar">
|
||||
<bar-chart ref="analysisBarChart" :chartData="chartData" :timeDim="timeDim" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="折线图" name="line">
|
||||
<line-chart ref="analysisLineChart" :chartData="chartData" :timeDim="timeDim"/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<!-- 没有数据 -->
|
||||
<div class="no-data-bg" v-show='!chartData.length'></div>
|
||||
</div>
|
||||
<div
|
||||
class="app-container contrastAnalysisBox"
|
||||
id="contrastAnalysisBox">
|
||||
<!-- 搜索工作栏 -->
|
||||
<search-area
|
||||
:isFold="isFold"
|
||||
@submit="getList"
|
||||
@export="exportExl" />
|
||||
<div v-show="chartData.length">
|
||||
<bar-chart
|
||||
ref="analysisBarChart"
|
||||
:chartData="chartData"
|
||||
:timeDim="timeDim" />
|
||||
<base-table
|
||||
:table-props="tableProps"
|
||||
:table-data="list"
|
||||
:max-height="tableH"
|
||||
class="contrast-out-table" />
|
||||
</div>
|
||||
<!-- 没有数据 -->
|
||||
<div
|
||||
class="no-data-bg"
|
||||
v-show="!chartData.length"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getCompare } from "@/api/analysis/energyAnalysis"
|
||||
import SearchArea from "./components/searchArea"
|
||||
import BarChart from "./components/barChart"
|
||||
import LineChart from "./components/lineChart"
|
||||
import { getCompare } from '@/api/analysis/energyAnalysis';
|
||||
import SearchArea from './components/searchArea';
|
||||
import BarChart from './components/barChart';
|
||||
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
||||
import FileSaver from 'file-saver';
|
||||
import * as XLSX from 'xlsx/xlsx.mjs';
|
||||
// import moment from 'moment'
|
||||
export default {
|
||||
name: 'ContrastAnalysis',
|
||||
components: { SearchArea, BarChart, LineChart },
|
||||
data() {
|
||||
return {
|
||||
isFold: false,
|
||||
activeName: 'bar',
|
||||
chartData: [],
|
||||
timeDim: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', () => {
|
||||
this.tableH = this.tableHeight(260)
|
||||
this.isFold = this.searchBarWidth('contrastAnalysisBox', 1437)
|
||||
// console.log(document.getElementById("contrastAnalysisBox").offsetWidth)
|
||||
})
|
||||
this.isFold = this.searchBarWidth('contrastAnalysisBox', 1437)
|
||||
},
|
||||
methods: {
|
||||
getList(params) {
|
||||
this.timeDim = params.timeDim
|
||||
getCompare({ ...params }).then((res) => {
|
||||
console.log(res)
|
||||
if (res.code === 0) {
|
||||
this.chartData = res.data || []
|
||||
} else {
|
||||
this.chartData = []
|
||||
}
|
||||
})
|
||||
},
|
||||
switchChart() {
|
||||
if (this.activeName === 'bar') {
|
||||
this.$nextTick((res) => {
|
||||
this.$refs.analysisBarChart.getChart()
|
||||
})
|
||||
} else {
|
||||
this.$nextTick((res) => {
|
||||
this.$refs.analysisLineChart.getChart()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
name: 'ContrastAnalysis',
|
||||
components: { SearchArea, BarChart },
|
||||
mixins: [tableHeightMixin],
|
||||
data() {
|
||||
return {
|
||||
isFold: false,
|
||||
chartData: [],
|
||||
timeDim: '',
|
||||
tableProps: [],
|
||||
list: [],
|
||||
tableH: this.tableHeight(250) / 2,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', () => {
|
||||
this.isFold = this.searchBarWidth('contrastAnalysisBox', 1437);
|
||||
// console.log(document.getElementById("contrastAnalysisBox").offsetWidth)
|
||||
});
|
||||
this.isFold = this.searchBarWidth('contrastAnalysisBox', 1437);
|
||||
},
|
||||
methods: {
|
||||
_setTableHeight() {
|
||||
this.tableH = this.tableHeight(250) / 2;
|
||||
},
|
||||
getList(params) {
|
||||
this.timeDim = params.timeDim;
|
||||
getCompare({ ...params }).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.getTableList(res.data || []);
|
||||
this.chartData = res.data || [];
|
||||
} else {
|
||||
this.chartData = [];
|
||||
}
|
||||
});
|
||||
},
|
||||
getTableList(arr) {
|
||||
this.tableProps = [];
|
||||
this.list = [];
|
||||
let tempX = [];
|
||||
let timeArr = arr[0].trendRespVOList || [];
|
||||
this.list = timeArr.map((item) => {
|
||||
return { time: item.time };
|
||||
});
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
let obj = {};
|
||||
obj.prop = arr[i].objId;
|
||||
obj.label = arr[i].objName;
|
||||
obj.minWidth = 100;
|
||||
tempX.push(obj);
|
||||
let tiemList = arr[i].trendRespVOList;
|
||||
for (let j = 0; j < tiemList.length; j++) {
|
||||
this.list[j][arr[i].objId] = tiemList[j].useNum
|
||||
? tiemList[j].useNum.toFixed(2)
|
||||
: null;
|
||||
}
|
||||
}
|
||||
this.tableProps = [{ prop: 'time', label: '时间' }].concat(tempX);
|
||||
},
|
||||
// 导出
|
||||
exportExl() {
|
||||
if (this.list.length > 0) {
|
||||
var wb = XLSX.utils.table_to_book(
|
||||
document.querySelector('.contrast-out-table')
|
||||
);
|
||||
let fileName = '对比分析.xlsx';
|
||||
var wbout = XLSX.write(wb, {
|
||||
bookType: 'xlsx',
|
||||
bookSST: true,
|
||||
type: 'array',
|
||||
});
|
||||
try {
|
||||
FileSaver.saveAs(
|
||||
new Blob([wbout], { type: 'application/octet-stream' }),
|
||||
fileName
|
||||
);
|
||||
this.$message.success('导出成功');
|
||||
} catch (e) {
|
||||
if (typeof console !== 'undefined') console.log(e, wbout);
|
||||
}
|
||||
return wbout;
|
||||
} else {
|
||||
this.$modal.msgWarning('暂无数据导出');
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
.contrastAnalysisBox {
|
||||
.el-tabs__nav::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #e4e7ed;
|
||||
/* z-index: 1; */
|
||||
}
|
||||
.el-tabs__nav-wrap::after {
|
||||
width: 0;
|
||||
}
|
||||
.el-tabs__item {
|
||||
padding: 0 10px;
|
||||
}
|
||||
.el-tabs__item:hover {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
.el-tabs__item.is-active {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
.el-tabs__item {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
.contrast-out-table {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user