From 1c0a0c943c95f304784d4adad4a31ac0bfba55bd Mon Sep 17 00:00:00 2001
From: wj <347312259@qq.com>
Date: Wed, 24 May 2023 11:41:37 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=8C=E6=AF=94=E5=88=86=E6=9E=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
psdc-ui/src/api/analyse/nhfx/nhfx.js | 4 +
psdc-ui/src/views/analyse/nhfx/index.vue | 309 ++++++++++++++++++++---
2 files changed, 274 insertions(+), 39 deletions(-)
diff --git a/psdc-ui/src/api/analyse/nhfx/nhfx.js b/psdc-ui/src/api/analyse/nhfx/nhfx.js
index dcea9a4..90213d8 100644
--- a/psdc-ui/src/api/analyse/nhfx/nhfx.js
+++ b/psdc-ui/src/api/analyse/nhfx/nhfx.js
@@ -1,5 +1,9 @@
import request from '@/utils/request'
+/** 计算同比分析*/
+export function getTongbiFx(data) {
+ return request.post('/evaluate/analysis/yearOnYearAnalyse',data)
+}
/** 计算环比分析*/
diff --git a/psdc-ui/src/views/analyse/nhfx/index.vue b/psdc-ui/src/views/analyse/nhfx/index.vue
index bcf0e43..28e335b 100644
--- a/psdc-ui/src/views/analyse/nhfx/index.vue
+++ b/psdc-ui/src/views/analyse/nhfx/index.vue
@@ -5,7 +5,7 @@
<el-form :inline="true" class="demo-form-inline">
<el-form-item label="耗能设备" prop="week">
<el-select v-model="selectDevice" placeholder="请选择" @change="handleDevChange" style="width: 240px">
- <el-option label="所有" value="0" />
+<!-- <el-option label="所有" value="0" />-->
<el-option v-for="item in deviceName" :key="item.deviceId" :label="item.deviceName" :value="item.deviceId" />
</el-select>
</el-form-item>
@@ -14,28 +14,18 @@
<el-form-item><el-button type="primary" @click="nextYear">下一年<el-icon><ArrowRight /></el-icon></el-button></el-form-item>
<el-form-item><el-button type="primary" icon="Search" @click="handleQuery1">查询</el-button></el-form-item>
</el-form>
- <div class="chartBox">
- <div id="chart"></div>
+ <div class="chartBox" ref="container">
+ <div v-show="isShow1" id="tongbiChart" ref="div"></div>
+ <el-empty v-show="isShow2" description="暂无数据" ref="el-empty"/>
</div>
<div class="tableBox1">
- <el-table :data="tbfxDataTable" height="400px">
+ <el-table :data="tbfxDataTable" height="345px">
<el-table-column label="月份" align="center" prop="month" width="100"/>
- <el-table-column label="本期" align="center" prop="currentPeriod"/>
- <el-table-column label="同期" align="center" prop="theSameTerm"/>
- <el-table-column label="同比(%)" align="center" prop="yearOnYear"/>
- <el-table-column label="累计同比(%)" align="center" prop="totalYearOnYear"/>
+ <el-table-column label="本期" align="center" prop="year"/>
+ <el-table-column label="同期" align="center" prop="toYear"/>
+ <el-table-column label="同比(%)" align="center" prop="compute"/>
+ <el-table-column label="累计同比(%)" align="center" prop="addUp"/>
</el-table>
- <el-pagination
- v-model:current-page="tbfxCurrentPage"
- v-model:page-size="tbfxPageSize"
- :page-sizes="[5, 10, 20, 50]"
- :small="tbfxSmall"
- :disabled="tbfxDisabled"
- :background="tbfxBackground"
- layout="total, sizes, prev, pager, next, jumper"
- :total="tbfxDataTable.length"
- @size-change="tbfxHandleSizeChange"
- @current-change="tbfxHandleCurrentChange"/>
</div>
</el-tab-pane>
@@ -78,7 +68,7 @@
<!-- 生成图表弹出窗 -->
<el-dialog class="mrt" :title="title" v-model="open" width="1000px" append-to-body :close-on-click-modal="false" :show-close="false">
<div class="chartBox">
- <div id="chart"></div>
+ <div id="huanbiChart"></div>
</div>
<el-button class="floatRight" @click=close>关闭</el-button>
</el-dialog>
@@ -90,15 +80,17 @@
<script setup name="Index">
import {Histogram} from '@element-plus/icons-vue'
-import {ref,reactive,onMounted,nextTick } from "vue";
-import { getHuanbiFx } from "@/api/analyse/nhfx/nhfx"
+import {ref, reactive, onMounted, nextTick, onBeforeUnmount} from "vue";
+import { getHuanbiFx,getTongbiFx } from "@/api/analyse/nhfx/nhfx"
import { getDevice } from "@/api/control/manual"
+import * as echarts from "echarts";
onMounted(async () => {
await nextTick();
// 在这里进行el-tabs的初始化操作
formattedDateFun()
getDeviceList()
+ getTongbiFxFun()
})
/** 格式化日期*/
@@ -120,19 +112,26 @@ function formattedDateFun(){
/** 切换按钮操作*/
const activeName = ref('同比分析')
-/** ----------同比分析----------*/
+/** ------------------------------同比分析------------------------------*/
+/** ------------------------------------------------------------------*/
/** 过滤查询*/
//渲染设备列表
-const selectDevice = ref()
+const selectDevice = ref(1)
const deviceName = ref([])
function getDeviceList(){
getDevice().then((res)=>{
deviceName.value = res.data
- console.log(deviceName.value)
})
}
+//拿到设备id
+const checkedDevId = ref(1)
+function handleDevChange(id){
+ console.log(id)
+ checkedDevId.value = id
+}
//切换年份处理
+//本期年份
const dateValue1 = ref(new Date().getFullYear().toString());
//上一年
function lastYear(){
@@ -147,19 +146,240 @@ function nextYear(){
console.log('下一年',dateValue1.value)
}
//查询
-function handleQuery1(){}
+function handleQuery1(){
+ getTongbiFxFun()
+}
+
+/** echart处理*/
+//空状态
+const isShow1 = ref(true)
+const isShow2 = ref(false)
+//获取渲染echart数据和表格数据
+const tongbiBenqi = ref([])
+const tongbiTongqi = ref([])
+const tbfxDataTable = ref([])
+function getTongbiFxFun(){
+ getTongbiFx({
+ "deviceId": checkedDevId.value,
+ "year": parseInt(dateValue1.value),
+ "toYear": dateValue1.value - 1
+ }).then((res)=>{
+ //渲染柱状图
+ if(res.code == 200 && res.data.StatisticsToYear != null && res.data.StatisticsYear != null){
+ isShow1.value = true
+ isShow2.value = false
+
+ //本期
+ let benqiArr = []
+ console.log(res)
+ delete res.data.StatisticsYear.yearId
+ delete res.data.StatisticsYear.deviceId
+ delete res.data.StatisticsYear.deviceName
+ delete res.data.StatisticsYear.yearDate
+ for(let i in res.data.StatisticsYear){
+ benqiArr.push(res.data.StatisticsYear[i])
+ }
+ tongbiBenqi.value = benqiArr
+
+ //同期
+ let tongqiArr = []
+ delete res.data.StatisticsToYear.yearId
+ delete res.data.StatisticsToYear.deviceId
+ delete res.data.StatisticsToYear.deviceName
+ delete res.data.StatisticsToYear.yearDate
+ for(let i in res.data.StatisticsToYear){
+ tongqiArr.push(res.data.StatisticsToYear[i])
+ }
+ tongbiTongqi.value = tongqiArr
+ tongbiChartFun()
+ }else {
+ isShow1.value = false
+ isShow2.value = true
+ }
+
+ //渲染表格
+ if(res.data.yearOnYear && res.data.yearOnYear.length > 0){
+ tbfxDataTable.value = res.data.yearOnYear
+ }else{
+ tbfxDataTable.value = []
+ }
+
+
+ })
+}
+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 = {
+ legend: {
+ data: ["本期","同期"],
+ // selectedMode: 'single',
+ textStyle: {
+ color: "#f3ffff"
+ }
+ },
+ tooltip: {
+ trigger: "axis",
+ // borderColor: '#00fcff',
+ borderWidth: 1
+ },
+ grid:{
+ show: true,
+ top: '20%',
+ bottom:'6%',
+ left:'2%',
+ right:'2%',
+ borderWidth: 1,
+ borderColor: '#767da1',
+ },
+ xAxis: {
+ type: 'category',
+ name:'月',
+ data: ['01','02','03','04','05','06','07','08','09','10','11','12'],
+ nameTextStyle: {
+ color: "#f3ffff",
+ nameLocation: "start"
+ },
+ axisLabel: {
+ textStyle: {
+ color: "#f3ffff"
+ }
+ },
+ 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: "#f3ffff",
+ nameLocation: "start"
+ },
+ axisLabel: {
+ textStyle: {
+ color: "#f3ffff"
+ }
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {color: "#767da1", type: "solid"} //dashed
+ } //s是否显示为虚线的条纹背景
+ },
+ series: [
+ {
+ name: "本期",
+ data: tongbiBenqi.value,
+ type: 'bar',
+ smooth: true,
+ symbol: "none", //去掉圆点
+ itemStyle: { //线条颜色
+ color: 'rgba(51,221,223)',
+ },
+ markPoint: {
+ data: [
+ {
+ type: "max",
+ name: "最大值",
+ symbol: 'circle',
+ symbolSize: 18,
+ label:{
+ color:'#fff',
+ fontSize:12,
+ formatter: function(params){
+ return 'Max：' + params.value;
+ },
+ // textBorderWidth:3,
+ // textBorderColor:"#1490fc",
+ position: 'top',
+ // offset: [0, 0]
+ }
+ },
+ {
+ type: "min",
+ name: "最小值",
+ symbol: 'circle',
+ symbolSize: 18,
+ label:{
+ color:'#fff',
+ fontSize:12,
+ position: 'top',
+ formatter: function(params){
+ return 'Min：' + params.value;
+ },
+ }
+ }
+ ]
+ },
+ },
+ {
+ name: "同期",
+ data: tongbiTongqi.value,
+ type: 'bar',
+ smooth: true,
+ symbol: "none", //去掉圆点
+ itemStyle: { //线条颜色
+ color: 'rgba(182,162,222)',
+ },
+ markPoint: {
+ data: [
+ {
+ type: "max",
+ name: "最大值",
+ symbol: 'circle',
+ symbolSize: 18,
+ label:{
+ color:'#fff',
+ fontSize:12,
+ formatter: function(params){
+ return 'Max: ' + params.value;
+ },
+ // textBorderWidth:3,
+ // textBorderColor:"#1490fc",
+ position: 'top',
+ // offset: [0, 0]
+ }
+ },
+ {
+ type: "min",
+ name: "最小值",
+ symbol: 'circle',
+ symbolSize: 18,
+ label:{
+ color:'#fff',
+ fontSize:12,
+ position: 'top',
+ formatter: function(params){
+ return 'Min: ' + params.value;
+ },
+ }
+ }
+ ]
+ },
+ },
+ ],
+ };
+ option && tongbiChart.setOption(option);
+}
/** 数据表格处理*/
//内容
-const tbfxDataTable = reactive([
- {
- month:'01月',
- currentPeriod: '1265',
- theSameTerm:'3254',
- yearOnYear:'30',
- totalYearOnYear:'32',
- }
-])
const tbfxCurrentPage = ref(1)
const tbfxPageSize = ref(5)
const tbfxSmall = ref(false)
@@ -173,7 +393,10 @@ const tbfxHandleCurrentChange = (val) => {
}
-/** ----------环比分析----------*/
+
+
+/** ------------------------------环比分析------------------------------*/
+/** ------------------------------------------------------------------*/
/** 点击环比分析*/
function handleTabClick(e){
console.log(e.paneName)
@@ -271,7 +494,11 @@ function close(){
-
+/** 页面销毁时*/
+onBeforeUnmount(() => {
+ tongbiChart.dispose(); // 销毁实例，防止内存泄漏
+ // huanbiChart.dispose();
+});
</script>
@@ -284,10 +511,13 @@ function close(){
.chartBox{
width: 100%;
height: 300px;
- border: 1px solid #fff;
margin-bottom: 18px;
overflow: hidden;
- #chart{
+ #tongbiChart{
+ width: 100%;
+ height: 100%;
+ }
+ #huanbiChart{
width: 100%;
height: 100%;
}
@@ -296,6 +526,7 @@ function close(){
width: 100%;
height: 402px;
overflow: hidden;
+ background-color: #2F3D8A;
}
.tableBox2{
width: 100%;