mt-fe-group/yudao-dev
12
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request 'projects/mesxc-zjl' (#337) from projects/mesxc-zjl into projects/mesxc-test

Browse Source 
Reviewed-on: #337
This commit is contained in:
朱菊兰 2024-04-15 14:59:29 +08:00
commit 5584a47575
2 changed files with 130 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
src/views/energy/analysis/qoqAnalysis/components/lineChart.vue
View File

@ -2,40 +2,39 @@
<div <div
id="analysischartLine" id="analysischartLine"
style="width: 100%" style="width: 100%"
:style="{ height: chartHeight + 'px' }" :style="{ height: chartHeight + 'px' }"></div>
></div>
</template> </template>
<script> <script>
import * as echarts from 'echarts' import * as echarts from 'echarts';
import resize from '@/utils/chartMixins/resize' import resize from '@/utils/chartMixins/resize';
export default { export default {
name: "LineChart", name: 'LineChart',
mixins: [resize], mixins: [resize],
data() { data() {
return { return {
chartDom: '', chartDom: '',
chart: '', chart: '',
chartHeight: this.tableHeight(370) chartHeight: this.tableHeight(370),
} };
}, },
props: { props: {
chartData: { chartData: {
type: Array, type: Array,
required: true, required: true,
default: () => { default: () => {
return [] return [];
} },
} },
}, },
watch: { watch: {
chartData: function () { chartData: function () {
this.getChart() this.getChart();
} },
}, },
mounted() { mounted() {
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
this.chartHeight = this.tableHeight(370) this.chartHeight = this.tableHeight(370);
}) });
}, },
methods: { methods: {
getChart() { getChart() {
@ -44,95 +43,89 @@ export default {
this.chart !== '' && this.chart !== '' &&
this.chart !== undefined this.chart !== undefined
) { ) {
this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例 this.chart.dispose(); // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
} }
this.chartDom = document.getElementById('analysischartLine') this.chartDom = document.getElementById('analysischartLine');
this.chart = echarts.init(this.chartDom) this.chart = echarts.init(this.chartDom);
if (this.chartData.length === 0) { if (this.chartData.length === 0) {
return false return false;
} }
let arr = this.chartData[0].type // [水，电，煤] let arr = this.chartData[0].type; // [水，电，煤]
let keys = Object.keys(this.chartData[0]) let keys = Object.keys(this.chartData[0]);
let yData = [ let yData = [
{ {
name: '本期', name: '本期',
type: 'bar', type: 'bar',
data: [], data: [],
barWidth: 20, barWidth: 20,
label: {
show: true,
position: 'top'
}
}, },
{ {
name: '上期', name: '上期',
type: 'bar', type: 'bar',
data: [], data: [],
barWidth: 20, barWidth: 20,
label: { },
show: true, ];
position: 'top'
}
}
]
for (let j = 0; j < arr.length; j++) { for (let j = 0; j < arr.length; j++) {
for (let k = 0; k < keys.length; k++) { for (let k = 0; k < keys.length; k++) {
if (keys[k].indexOf(arr[j]+'_上期') > -1) { if (keys[k].indexOf(arr[j] + '_上期') > -1) {
yData[1].data.push(this.chartData[0][keys[k]]) yData[1].data.push(this.chartData[0][keys[k]]);
} }
if (keys[k].indexOf(arr[j]+'_能源消耗') > -1) { if (keys[k].indexOf(arr[j] + '_能源消耗') > -1) {
yData[0].data.push(this.chartData[0][keys[k]]) yData[0].data.push(this.chartData[0][keys[k]]);
} }
} }
} }
var option = { var option = {
color:['#288AFF','#8EF0AB'], color: ['#288AFF', '#8EF0AB'],
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'shadow' type: 'shadow',
}, },
formatter: function(params) { formatter: function (params) {
return ( return (
params[0].axisValue + params[0].axisValue +
`<br>` + `<br>` +
params.map((item) => { params
let str = `<span style="display:inline-block;width:8px;height:8px;margin: 0 8px 0 -3px;border-radius:2px;background-color:${item.color};"></span>` .map((item) => {
let seriesNameStr = `<span style="display:inline-block;">${item.seriesName}</span>` 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 value = item.value ? item.value : '-' let seriesNameStr = `<span style="display:inline-block;">${item.seriesName}</span>`;
let valueStr = `<span style="display:inline-block;margin-left:10px;color:rgba(0,0,0,0.45);">${value}</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"> return `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
<span>${str}${seriesNameStr}</span> <span>${str}${seriesNameStr}</span>
<span>${valueStr}</span> <span>${valueStr}</span>
</span>` </span>`;
}).join(``) })
) .join(``)
} );
},
}, },
legend: { legend: {
right: '1%', right: '1%',
icon: 'rect', icon: 'rect',
itemHeight: 8, itemHeight: 8,
itemWidth: 8 itemWidth: 8,
}, },
grid: { grid: {
left: '1%', left: '1%',
right: '1%', right: '1%',
bottom: '3%', bottom: '3%',
containLabel: true containLabel: true,
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
boundaryGap: [0, 0.01] boundaryGap: [0, 0.01],
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: arr data: arr,
}, },
series: yData series: yData,
} };
option && this.chart.setOption(option); option && this.chart.setOption(option);
} },
} },
} };
</script> </script>

27
src/views/energy/analysis/trendAnalysis/index.vue
View File

@ -74,29 +74,12 @@ export default {
}, },
// 导出excel // 导出excel
exportExl(params) { exportExl(params) {
exportTrend({ ...params }).then((res) => { exportTrend({ ...params })
// let fileName = ''; .then((response) => {
// const contentDisposition = res.headers['content-disposition']; this.$download.excel(response, '走势分析.xls');
// if (contentDisposition) {
// fileName = decodeURIComponent(
// contentDisposition.slice(
// contentDisposition.indexOf('filename=') + 9
// )
// );
// }
const blob = new Blob([res.data]);
const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = (e) => {
const a = document.createElement('a');
a.download = '走势分析';
a.href = e.target.result;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
this.$message.success('导出成功'); this.$message.success('导出成功');
}; })
}); .catch(() => {});
}, },
}, },
}; };