同比分析

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)
+}
 
 
 /** 计算环比分析*/

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%;