看板能耗管理

huang

2025-03-18 67c9118cffb7d7407668bbbad4c64f9aaf21ba0d

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

@@ -2,8 +2,110 @@


<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 {
@@ -93,7 +195,6 @@
    //this.drawBarchart('drawBarchart', 1);
  },
  methods: {
    //方法
    draw(name, Option,data) {
      var myChart = echarts.init(document.getElementById(name));
      myChart.setOption(Option);