能源类型
This commit is contained in:
@@ -14,7 +14,7 @@ export default {
|
||||
return {
|
||||
chartDom: '',
|
||||
chart: '',
|
||||
chartHeight: this.tableHeight(214) - 100,
|
||||
chartHeight: this.tableHeight(314),
|
||||
};
|
||||
},
|
||||
props: {
|
||||
@@ -37,7 +37,7 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', () => {
|
||||
this.chartHeight = this.tableHeight(214) - 70;
|
||||
this.chartHeight = this.tableHeight(314);
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
|
||||
@@ -1,102 +1,119 @@
|
||||
<template>
|
||||
<div id="analysischartLine" style="width: 100%;height: 100%;"></div>
|
||||
<div
|
||||
id="analysischartLine"
|
||||
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: "LineChart",
|
||||
mixins: [resize],
|
||||
data() {
|
||||
return {
|
||||
chartDom: '',
|
||||
chart: '',
|
||||
chartHeight: this.tableHeight(214) - 70
|
||||
}
|
||||
},
|
||||
props: {
|
||||
chartData: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
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)
|
||||
if (this.chartData.length === 0) {
|
||||
return false
|
||||
}
|
||||
let xData = []
|
||||
let arr = this.chartData[0].type
|
||||
let keys = Object.keys(this.chartData[0])
|
||||
let yData = []
|
||||
for (let j = 0; j < arr.length; j++) {
|
||||
for (let k = 0; k < keys.length; k++) {
|
||||
if (keys[k].indexOf(arr[j] + '_上年同期') > -1 || keys[k].indexOf(arr[j] + '_能源消耗') > -1) {
|
||||
let obj = {
|
||||
name: '',
|
||||
type: 'line',
|
||||
data: []
|
||||
}
|
||||
obj.name = keys[k]
|
||||
yData.push(obj)
|
||||
}
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < this.chartData.length; i++) {
|
||||
xData.push(this.chartData[i].time)
|
||||
for (let p = 0; p < yData.length; p++) {
|
||||
yData[p].data.push(this.chartData[i][yData[p].name])
|
||||
}
|
||||
}
|
||||
var option = {
|
||||
color: ['#FFDC94', '#8EF0AB', '#63BDFF', '#288AFF', '#7164FF', '#FF6860', '#FF9747', '#B0EB42', '#D680FF', '#0043D2'],
|
||||
legend: {
|
||||
data: keys,
|
||||
right: '1%'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
grid: {
|
||||
left: '1%',
|
||||
right: '1%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xData
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: yData
|
||||
};
|
||||
name: 'LineChart',
|
||||
mixins: [resize],
|
||||
data() {
|
||||
return {
|
||||
chartDom: '',
|
||||
chart: '',
|
||||
chartHeight: this.tableHeight(250) / 2,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
chartData: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
},
|
||||
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('analysischartLine');
|
||||
this.chart = echarts.init(this.chartDom);
|
||||
if (this.chartData.length === 0) {
|
||||
return false;
|
||||
}
|
||||
let xData = [];
|
||||
let arr = this.chartData[0].type;
|
||||
let keys = Object.keys(this.chartData[0]);
|
||||
let yData = [];
|
||||
for (let j = 0; j < arr.length; j++) {
|
||||
for (let k = 0; k < keys.length; k++) {
|
||||
if (
|
||||
keys[k].indexOf(arr[j] + '_上年同期') > -1 ||
|
||||
keys[k].indexOf(arr[j] + '_能源消耗') > -1
|
||||
) {
|
||||
let obj = {
|
||||
name: '',
|
||||
type: 'line',
|
||||
data: [],
|
||||
};
|
||||
obj.name = keys[k];
|
||||
yData.push(obj);
|
||||
}
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < this.chartData.length; i++) {
|
||||
xData.push(this.chartData[i].time);
|
||||
for (let p = 0; p < yData.length; p++) {
|
||||
yData[p].data.push(this.chartData[i][yData[p].name]);
|
||||
}
|
||||
}
|
||||
var option = {
|
||||
color: [
|
||||
'#FFDC94',
|
||||
'#8EF0AB',
|
||||
'#63BDFF',
|
||||
'#288AFF',
|
||||
'#7164FF',
|
||||
'#FF6860',
|
||||
'#FF9747',
|
||||
'#B0EB42',
|
||||
'#D680FF',
|
||||
'#0043D2',
|
||||
],
|
||||
legend: {
|
||||
data: keys,
|
||||
right: '1%',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
grid: {
|
||||
left: '1%',
|
||||
right: '1%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xData,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: yData,
|
||||
};
|
||||
|
||||
option && this.chart.setOption(option);
|
||||
}
|
||||
}
|
||||
}
|
||||
option && this.chart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,143 +1,153 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 搜索工作栏 -->
|
||||
<search-area @submit="getList" @exportD="exportData"/>
|
||||
<div v-show='chartData.length'>
|
||||
<div class="chartTitle">同比分析图</div>
|
||||
<div style='width: 100%;height: 400px;'>
|
||||
<line-chart ref="analysisLineChart" :chartData="chartData"/>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<base-table
|
||||
:table-props="tableProps"
|
||||
:table-data="list"
|
||||
:max-height="tableH"
|
||||
class="yoy-out-table"
|
||||
/>
|
||||
</div>
|
||||
<!-- 没有数据 -->
|
||||
<div class="no-data-bg" v-show='!chartData.length'></div>
|
||||
</div>
|
||||
<div class="app-container">
|
||||
<!-- 搜索工作栏 -->
|
||||
<search-area
|
||||
@submit="getList"
|
||||
@exportD="exportData" />
|
||||
<div v-show="chartData.length">
|
||||
<div class="chartTitle">同比分析图</div>
|
||||
<div style="width: 100%">
|
||||
<line-chart
|
||||
ref="analysisLineChart"
|
||||
:chartData="chartData" />
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<base-table
|
||||
:table-props="tableProps"
|
||||
:table-data="list"
|
||||
:max-height="tableH"
|
||||
class="yoy-out-table" />
|
||||
</div>
|
||||
<!-- 没有数据 -->
|
||||
<div
|
||||
class="no-data-bg"
|
||||
v-show="!chartData.length"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getYoy } from "@/api/analysis/energyAnalysis"
|
||||
import subRate from "./components/subRate.vue"
|
||||
import SearchArea from "./components/searchArea"
|
||||
import LineChart from "./components/lineChart"
|
||||
import FileSaver from "file-saver"
|
||||
import * as XLSX from 'xlsx/xlsx.mjs'
|
||||
import { getYoy } from '@/api/analysis/energyAnalysis';
|
||||
import subRate from './components/subRate.vue';
|
||||
import SearchArea from './components/searchArea';
|
||||
import LineChart from './components/lineChart';
|
||||
import FileSaver from 'file-saver';
|
||||
import * as XLSX from 'xlsx/xlsx.mjs';
|
||||
export default {
|
||||
name: 'YoyAnalysis',
|
||||
components: { SearchArea, LineChart },
|
||||
data() {
|
||||
return {
|
||||
chartData: [],
|
||||
tableProps: [],
|
||||
list: [],
|
||||
tableH: this.tableHeight(640)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', () => {
|
||||
this.tableH = this.tableHeight(640)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getList(params) {
|
||||
getYoy({ ...params }).then((res) => {
|
||||
if (res.code === 0 && res.data) {
|
||||
this.getTableList(res.data)
|
||||
} else {
|
||||
this.chartData = []
|
||||
this.list = []
|
||||
}
|
||||
})
|
||||
},
|
||||
getTableList(arr) {
|
||||
let data = arr.data
|
||||
let nameData = arr.nameData
|
||||
let tempX = []
|
||||
data[0].data.map((item) => {
|
||||
let obj = {}
|
||||
obj.prop = item.dynamicName
|
||||
obj.label = item.dynamicName
|
||||
obj.id = item.id
|
||||
obj.children = []
|
||||
tempX.push(obj)
|
||||
})
|
||||
for (let i = 0; i < nameData.length; i++) {
|
||||
for (let j = 0; j < tempX.length; j++) {
|
||||
if (tempX[j].id === nameData[i].parentId) {
|
||||
let obj = {}
|
||||
obj.prop = tempX[j].prop + '_' + nameData[i].name
|
||||
obj.label = nameData[i].name
|
||||
if (obj.label.indexOf('同比')!= -1) {
|
||||
obj.subcomponent = subRate
|
||||
}
|
||||
tempX[j].children.push(obj)
|
||||
}
|
||||
}
|
||||
}
|
||||
this.tableProps = [{prop: 'time',label: '时间'}].concat(tempX)
|
||||
console.log(this.tableProps)
|
||||
// 数据
|
||||
this.list = []
|
||||
for (let k = 0; k < data.length; k++) {
|
||||
let obj = {}
|
||||
obj.time = data[k].time
|
||||
let arr1 = data[k].data
|
||||
obj.type = []
|
||||
for (let q = 0; q < arr1.length; q++) {
|
||||
let name = arr1[q].dynamicName
|
||||
obj.type.push(name)
|
||||
let arr2 = arr1[q].children
|
||||
for (let p = 0; p < arr2.length; p++) {
|
||||
let prop = name + '_' + arr2[p].dynamicName
|
||||
obj[prop] = arr2[p].dynamicValue
|
||||
}
|
||||
}
|
||||
this.list.push(obj)
|
||||
}
|
||||
this.chartData = this.list
|
||||
},
|
||||
exportData(val) {
|
||||
if (this.list.length > 0) {
|
||||
var wb = XLSX.utils.table_to_book(document.querySelector(".yoy-out-table"))
|
||||
let fileName = val.name + "同比分析.xlsx"
|
||||
var wbout = XLSX.write(wb, {
|
||||
bookType: "xlsx",
|
||||
bookSST: true,
|
||||
type: "array"
|
||||
})
|
||||
try {
|
||||
FileSaver.saveAs(
|
||||
new Blob([wbout], { type: "application/octet-stream" }),
|
||||
fileName
|
||||
)
|
||||
} catch (e) {
|
||||
if (typeof console !== "undefined") console.log(e, wbout);
|
||||
}
|
||||
return wbout
|
||||
} else {
|
||||
this.$modal.msgWarning("暂无数据导出")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
name: 'YoyAnalysis',
|
||||
components: { SearchArea, LineChart },
|
||||
data() {
|
||||
return {
|
||||
chartData: [],
|
||||
tableProps: [],
|
||||
list: [],
|
||||
tableH: this.tableHeight(250) / 2,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', () => {
|
||||
this.tableH = this.tableHeight(250) / 2;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
getList(params) {
|
||||
getYoy({ ...params }).then((res) => {
|
||||
if (res.code === 0 && res.data) {
|
||||
this.getTableList(res.data);
|
||||
} else {
|
||||
this.chartData = [];
|
||||
this.list = [];
|
||||
}
|
||||
});
|
||||
},
|
||||
getTableList(arr) {
|
||||
let data = arr.data;
|
||||
let nameData = arr.nameData;
|
||||
let tempX = [];
|
||||
data[0].data.map((item) => {
|
||||
let obj = {};
|
||||
obj.prop = item.dynamicName;
|
||||
obj.label = item.dynamicName;
|
||||
obj.id = item.id;
|
||||
obj.children = [];
|
||||
tempX.push(obj);
|
||||
});
|
||||
for (let i = 0; i < nameData.length; i++) {
|
||||
for (let j = 0; j < tempX.length; j++) {
|
||||
if (tempX[j].id === nameData[i].parentId) {
|
||||
let obj = {};
|
||||
obj.prop = tempX[j].prop + '_' + nameData[i].name;
|
||||
obj.label = nameData[i].name;
|
||||
if (obj.label.indexOf('同比') != -1) {
|
||||
obj.subcomponent = subRate;
|
||||
}
|
||||
tempX[j].children.push(obj);
|
||||
}
|
||||
}
|
||||
}
|
||||
this.tableProps = [{ prop: 'time', label: '时间' }].concat(tempX);
|
||||
console.log(this.tableProps);
|
||||
// 数据
|
||||
this.list = [];
|
||||
for (let k = 0; k < data.length; k++) {
|
||||
let obj = {};
|
||||
obj.time = data[k].time;
|
||||
let arr1 = data[k].data;
|
||||
obj.type = [];
|
||||
for (let q = 0; q < arr1.length; q++) {
|
||||
let name = arr1[q].dynamicName;
|
||||
obj.type.push(name);
|
||||
let arr2 = arr1[q].children;
|
||||
for (let p = 0; p < arr2.length; p++) {
|
||||
let prop = name + '_' + arr2[p].dynamicName;
|
||||
obj[prop] = arr2[p].dynamicValue;
|
||||
}
|
||||
}
|
||||
this.list.push(obj);
|
||||
}
|
||||
this.chartData = this.list;
|
||||
},
|
||||
exportData(val) {
|
||||
if (this.list.length > 0) {
|
||||
var wb = XLSX.utils.table_to_book(
|
||||
document.querySelector('.yoy-out-table')
|
||||
);
|
||||
let fileName = val.name + '同比分析.xlsx';
|
||||
var wbout = XLSX.write(wb, {
|
||||
bookType: 'xlsx',
|
||||
bookSST: true,
|
||||
type: 'array',
|
||||
});
|
||||
try {
|
||||
FileSaver.saveAs(
|
||||
new Blob([wbout], { type: 'application/octet-stream' }),
|
||||
fileName
|
||||
);
|
||||
} catch (e) {
|
||||
if (typeof console !== 'undefined') console.log(e, wbout);
|
||||
}
|
||||
return wbout;
|
||||
} else {
|
||||
this.$modal.msgWarning('暂无数据导出');
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.yoy-out-table {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.chartTitle {
|
||||
font-size: 16px;
|
||||
color: #000;
|
||||
font-size: 16px;
|
||||
color: #000;
|
||||
}
|
||||
.chartTitle::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 18px;
|
||||
background-color: #0B58FF;
|
||||
border-radius: 1px;
|
||||
margin-right: 8px;
|
||||
vertical-align: bottom;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 18px;
|
||||
background-color: #0b58ff;
|
||||
border-radius: 1px;
|
||||
margin-right: 8px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user