看板能耗管理

huang

2025-03-18 67c9118cffb7d7407668bbbad4c64f9aaf21ba0d

 UI-Project/src/views/KanbanDisplay/kanbanDisplay.vue

@@ -1,9 +1,111 @@
<!--  空白页  -->


 
 
<script setup>
import { ref, computed } from 'vue'
import * as echarts from 'echarts'; 
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import request from '@/utils/request'

const energyData = ref([])

// 获取能耗数据
const loadEnergyData = async () => {
  try {
    const res = await request({
      url: '/deviceInteraction/energy/consumption/chartEnergy',
      method: 'post'
    })
    if (res.code === 200) {
      energyData.value = res.data.actual || [];
      updateEnergyChart()
    }
  } catch (error) {
    console.error('获取能耗数据失败:', error)
  }
}

const draw = (name, Option) => {
  var myChart = echarts.init(document.getElementById(name));
  myChart.setOption(Option);
}

const drawDay = (name, Option) => {
  Option.title.text = "能耗管理"; 
  draw(name, Option);
}

// 更新能耗图表
const updateEnergyChart = () => {
  // 按日期排序并格式化日期
  const sortedData = [...energyData.value].sort((a, b) => 
    new Date(a.recordDate) - new Date(b.recordDate)
  ).map(item => {
    const date = new Date(item.recordDate);
    return {
      ...item,
      recordDate: `${date.getMonth() + 1}-${date.getDate().toString().padStart(2, '0')}`
    };
  });

  const energyoption = {
    title: {
      text: '能耗管理'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
              backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      data: ['能耗值']
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: sortedData.map(item => item.recordDate)
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '能耗值',
        type: 'line',
        areaStyle: {},
        label: {
          show: true,
          position: 'top'
        },
        data: sortedData.map(item => item.energyValue)
      }
    ]
  }
  
  drawDay('drawLineChart_day71', energyoption);
}

onMounted(() => {
  loadEnergyData()
})
</script>
<script>
export default {
@@ -81,7 +183,7 @@
              100, 122, 101]
          }
        ]

 
      }
     this.drawDay('drawLineChart_day11',OptionDay, 1);
    // this.drawLineChart('drawLineChart_day11', 1);
@@ -93,17 +195,16 @@
    //this.drawBarchart('drawBarchart', 1);
  },
  methods: {
    //方法
    draw(name, Option,data) {
    draw(name, Option, data) {
      var myChart = echarts.init(document.getElementById(name));
      myChart.setOption(Option);
    },
    drawDay(name, Option,data) {
    drawDay(name, Option, data) {
      Option.title.text="日看板";
      console.log(Option);
      this.draw(name, Option,data);
      this.draw(name, Option, data);
    },
    drawLineChart(name, Option,data) {
    drawLineChart(name, Option, data) {
      console.log(name);
      console.log(data);
      var myChart = echarts.init(document.getElementById(name));
@@ -152,14 +253,14 @@
            }
          }
        ]


 
 
      });
    }
  }
}
</script>

 
<template>
  <div>
    <div style="font-size: 30px;height: 70px;line-height: 70px;border: 1px solid #ccc;text-align: center;">
@@ -184,7 +285,7 @@
        <div id="drawLineChart_day71" style="height: 33.3%;width: 100%;border: 1px solid #ccc;">能耗管理-按天显示（手输）</div>
      </div>
    </div>

 
    <!-- <div style="width:33% ;height: 880px;border: 1px solid #ccc;">
      <div id="drawLineChart_day1" style="height: 300px;width: 25%;border: 1px solid #ccc;float: left;"></div>
      <div id="drawLineChart_day2" style="height: 300px;width: 25%;border: 1px solid #ccc;float: left;"></div>