|
|
|
|
@ -15,8 +15,8 @@ |
|
|
|
|
<el-form-item><el-button type="primary" icon="Search" @click="handleQuery1">查询</el-button></el-form-item> |
|
|
|
|
</el-form> |
|
|
|
|
<div class="chartBox" ref="container"> |
|
|
|
|
<div v-show="isShow1" id="tongbiChart" ref="div"></div> |
|
|
|
|
<el-empty v-show="isShow2" description="暂无数据" ref="el-empty"/> |
|
|
|
|
<div v-show="isShow1" id="tongbiChart"></div> |
|
|
|
|
<el-empty v-show="isShow2" description="暂无数据"/> |
|
|
|
|
</div> |
|
|
|
|
<div class="tableBox1"> |
|
|
|
|
<el-table :data="tbfxDataTable" height="345px"> |
|
|
|
|
@ -49,7 +49,7 @@ |
|
|
|
|
<el-table-column label="环比(%)" align="center" prop="compute"/> |
|
|
|
|
<el-table-column label="操作" align="center"> |
|
|
|
|
<template v-slot="scope"> |
|
|
|
|
<el-button type="primary" size="small" :icon="Histogram" @click="handleChart">图表</el-button> |
|
|
|
|
<el-button type="primary" size="small" :icon="Histogram" @click="handleChart(scope)">图表</el-button> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
</el-table> |
|
|
|
|
@ -79,6 +79,8 @@ |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script setup name="Index"> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
import {Histogram} from '@element-plus/icons-vue' |
|
|
|
|
import {ref, reactive, onMounted, nextTick, onBeforeUnmount} from "vue"; |
|
|
|
|
import { getHuanbiFx,getTongbiFx } from "@/api/analyse/nhfx/nhfx" |
|
|
|
|
@ -209,8 +211,6 @@ function getTongbiFxFun(){ |
|
|
|
|
} |
|
|
|
|
let tongbiChart; |
|
|
|
|
function tongbiChartFun(){ |
|
|
|
|
console.log('echart数据本期：',tongbiBenqi.value) |
|
|
|
|
console.log('echart数据同期：',tongbiTongqi.value) |
|
|
|
|
const chartDom = document.getElementById('tongbiChart') |
|
|
|
|
tongbiChart = echarts.init(chartDom); |
|
|
|
|
const option = { |
|
|
|
|
@ -230,7 +230,7 @@ function tongbiChartFun(){ |
|
|
|
|
show: true, |
|
|
|
|
top: '20%', |
|
|
|
|
bottom:'6%', |
|
|
|
|
left:'2%', |
|
|
|
|
left:'3%', |
|
|
|
|
right:'2%', |
|
|
|
|
borderWidth: 1, |
|
|
|
|
borderColor: '#767da1', |
|
|
|
|
@ -413,6 +413,7 @@ const dateType = ref('date') |
|
|
|
|
const format = ref('YYYY-MM-DD') |
|
|
|
|
const valueFormat = ref('YYYY-MM-DD') |
|
|
|
|
const timeType = ref(1) |
|
|
|
|
const echartLegend = ref([]) |
|
|
|
|
//按日 |
|
|
|
|
function handleDaily(){ |
|
|
|
|
activeIndex.value = 0; |
|
|
|
|
@ -425,6 +426,7 @@ function handleDaily(){ |
|
|
|
|
valueFormat.value = 'YYYY-MM-DD' |
|
|
|
|
timeType.value = 1 |
|
|
|
|
dateValue2.value = `${year}-${month}-${day}` |
|
|
|
|
echartLegend.value = ['当日','上日'] |
|
|
|
|
console.log(dateValue2.value) |
|
|
|
|
getHuanbiFxFun() |
|
|
|
|
} |
|
|
|
|
@ -440,6 +442,7 @@ function handleMonthly(){ |
|
|
|
|
valueFormat.value = 'YYYY-MM' |
|
|
|
|
timeType.value = 2 |
|
|
|
|
dateValue2.value = `${year}-${month}` |
|
|
|
|
echartLegend.value = ['本月','上月'] |
|
|
|
|
console.log(dateValue2.value) |
|
|
|
|
getHuanbiFxFun() |
|
|
|
|
} |
|
|
|
|
@ -481,9 +484,16 @@ function getHuanbiFxFun(){ |
|
|
|
|
/** 生成图表按鈕操作*/ |
|
|
|
|
const title = ref() |
|
|
|
|
const open = ref(false) |
|
|
|
|
function handleChart(){ |
|
|
|
|
//生成图表按钮 |
|
|
|
|
const lastMonthData = ref([]) |
|
|
|
|
const thisMonthData = ref([]) |
|
|
|
|
function handleChart(scope){ |
|
|
|
|
open.value = true; |
|
|
|
|
|
|
|
|
|
lastMonthData.value = scope.row.lastMonthTotal |
|
|
|
|
thisMonthData.value = scope.row.thisMonthTotal |
|
|
|
|
setTimeout(()=>{ |
|
|
|
|
huanbiChartFun() |
|
|
|
|
},100) |
|
|
|
|
|
|
|
|
|
}; |
|
|
|
|
//关闭弹框按钮 |
|
|
|
|
@ -491,13 +501,115 @@ function close(){ |
|
|
|
|
open.value = false; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/** echart处理*/ |
|
|
|
|
let huanbiChart; |
|
|
|
|
function huanbiChartFun(){ |
|
|
|
|
dateValue2.value = dateValue2.value.toString() |
|
|
|
|
console.log('X轴：',dateValue2.value) |
|
|
|
|
console.log('本月：',thisMonthData.value,'上月：',lastMonthData.value) |
|
|
|
|
const chartDom = document.getElementById('huanbiChart') |
|
|
|
|
tongbiChart = echarts.init(chartDom); |
|
|
|
|
const option = { |
|
|
|
|
legend: { |
|
|
|
|
data: echartLegend.value, |
|
|
|
|
// selectedMode: 'single', |
|
|
|
|
textStyle: { |
|
|
|
|
color: "#333" |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: "axis", |
|
|
|
|
// borderColor: '#00fcff', |
|
|
|
|
borderWidth: 1 |
|
|
|
|
}, |
|
|
|
|
grid:{ |
|
|
|
|
show: true, |
|
|
|
|
top: '20%', |
|
|
|
|
bottom:'6%', |
|
|
|
|
left:'4%', |
|
|
|
|
right:'3%', |
|
|
|
|
borderWidth: 1, |
|
|
|
|
borderColor: '#767da1', |
|
|
|
|
}, |
|
|
|
|
xAxis: { |
|
|
|
|
type: 'category', |
|
|
|
|
name:'', |
|
|
|
|
data: [dateValue2.value], |
|
|
|
|
nameTextStyle: { |
|
|
|
|
color: "#333", |
|
|
|
|
nameLocation: "start" |
|
|
|
|
}, |
|
|
|
|
axisLabel: { |
|
|
|
|
textStyle: { |
|
|
|
|
color: "#333" |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
axisLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#767da1' // 设置x轴的线条颜色 |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
axisTick: { |
|
|
|
|
show: false // 去掉x轴刻度 |
|
|
|
|
}, |
|
|
|
|
splitArea: { |
|
|
|
|
show: true, |
|
|
|
|
interval:0, |
|
|
|
|
areaStyle: { |
|
|
|
|
color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组， |
|
|
|
|
//（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组） |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
yAxis: { |
|
|
|
|
type: 'value', |
|
|
|
|
name:'kWh', |
|
|
|
|
nameTextStyle: { |
|
|
|
|
color: "#333", |
|
|
|
|
nameLocation: "start" |
|
|
|
|
}, |
|
|
|
|
axisLabel: { |
|
|
|
|
textStyle: { |
|
|
|
|
color: "#333" |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
splitLine: { |
|
|
|
|
show: true, |
|
|
|
|
lineStyle: {color: "#767da1", type: "solid"} //dashed |
|
|
|
|
} //s是否显示为虚线的条纹背景 |
|
|
|
|
}, |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
name: echartLegend.value[0], |
|
|
|
|
data: thisMonthData.value, |
|
|
|
|
type: 'bar', |
|
|
|
|
smooth: true, |
|
|
|
|
symbol: "none", //去掉圆点 |
|
|
|
|
itemStyle: { //线条颜色 |
|
|
|
|
color: 'rgba(51,221,223)', |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: echartLegend.value[1], |
|
|
|
|
data: lastMonthData.value, |
|
|
|
|
type: 'bar', |
|
|
|
|
smooth: true, |
|
|
|
|
symbol: "none", //去掉圆点 |
|
|
|
|
itemStyle: { //线条颜色 |
|
|
|
|
color: 'rgba(182,162,222)', |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
}; |
|
|
|
|
option && tongbiChart.setOption(option); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/** 页面销毁时*/ |
|
|
|
|
onBeforeUnmount(() => { |
|
|
|
|
tongbiChart.dispose(); // 销毁实例，防止内存泄漏 |
|
|
|
|
// huanbiChart.dispose(); |
|
|
|
|
huanbiChart.dispose(); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
|
@ -561,7 +673,9 @@ onBeforeUnmount(() => { |
|
|
|
|
.floatRight{ |
|
|
|
|
margin-left: 90%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
::v-deep .el-dialog{ |
|
|
|
|
background-color: rgba(47,61,138) !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
::v-deep .el-tabs__item{ |
|
|
|
|
color: #fff; |
|
|
|
|
|
