JiuMuMES.git - Gitblit

<!--  空白页  -->
 
 
<script setup>
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 {
  mounted() {
    const OptionDay={ // 绘制图表
        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: ['1-01', '1-02', '1-03', '1-04', '1-05',
              '1-06', '1-07', '1-08', '1-09', '1-10',
              '1-11', '1-12', '1-13', '1-14', '1-15',
              '1-16', '1-17', '1-18', '1-19', '1-20',
              '1-21', '1-22', '1-23', '1-24', '1-25',
              '1-26', '1-27', '1-28', '1-29', '1-30', '1-31']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '计划产量',
            type: 'line',
            areaStyle: {},
            label: {
              show: true,
              position: 'top'
            },
            data: [120, 132, 101, 134, 90, 230, 210,
              120, 132, 101, 134, 90, 230, 210,
              120, 132, 101, 134, 90, 230, 210,
              120, 132, 101, 134, 90, 230, 210,
              120, 132, 101]
          },
          {
            name: '实际产量',
            type: 'line',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [100, 122, 101, 124, 90, 200, 180,
              100, 122, 101, 124, 90, 200, 180,
              100, 122, 101, 124, 90, 200, 180,
              100, 122, 101, 124, 90, 200, 180,
              100, 122, 101]
          }
        ]
 
      }
     this.drawDay('drawLineChart_day11',OptionDay, 1);
    // this.drawLineChart('drawLineChart_day11', 1);
    // this.drawLineChart('drawLineChart_day21', 1);
    // this.drawLineChart('drawLineChart_day31', 1);
    // this.drawLineChart('drawLineChart_day41', 1);
    // this.drawLineChart('drawLineChart_day51', 1);
    //this.drawLineChart('drawLineChart_week', 1);
    //this.drawBarchart('drawBarchart', 1);
  },
  methods: {
    draw(name, Option, data) {
      var myChart = echarts.init(document.getElementById(name));
      myChart.setOption(Option);
    },
    drawDay(name, Option, data) {
      Option.title.text="日看板";
      console.log(Option);
      this.draw(name, Option, data);
    },
    drawLineChart(name, Option, data) {
      console.log(name);
      console.log(data);
      var myChart = echarts.init(document.getElementById(name));
      myChart.setOption(Option);
    },
    drawBarchart(name, data) {
      var myChart = echarts.init(document.getElementById(name));
      myChart.setOption({ // 绘制图表
        title: {
          text: '总产量看板示例'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1000, name: '计划总片数' },
              { value: 900, name: '实际总片数' },
              { value: 10, name: '破损片数' }
            ]
            , label: {
              formatter: '{b}:{c}'
            }
          }
        ]
 
 
      });
    }
  }
}
</script>
 
<template>
  <div>
    <div style="font-size: 30px;height: 70px;line-height: 70px;border: 1px solid #ccc;text-align: center;">
      JOOMO镜片制造中心驾驶舱
    </div>
    <div style="margin-left: 20px;">
      <el-button type="primary" @click="drawPieChart">标准品</el-button>
      <el-button type="primary" @click="drawPieChart">定制品</el-button>
    </div>
    <div style="width:100% ;height: 880px;">
      <div style="width:33.3% ;height: 100%;border: 1px solid #ccc;float: left;">
        <div id="drawLineChart_day11" style="height: 50%;width: 100%;border: 1px solid #ccc;">日单达成率-片数</div>
        <div id="drawLineChart_day21" style="height: 50%;width: 100%;border: 1px solid #ccc;">月单达成率-片数</div>
      </div>
      <div style="width:33.3% ;height: 100%;border: 1px solid #ccc;float: left;">
        <div id="drawLineChart_day31" style="height: 50%;width: 100%;border: 1px solid #ccc;">日单达成率-平方</div>
        <div id="drawLineChart_day41" style="height: 50%;width: 100%;border: 1px solid #ccc;">月单达成率-平方</div>
      </div>
      <div style="width:33.3% ;height: 100%;border: 1px solid #ccc;float: left;">
        <div id="drawLineChart_day51" style="height: 33.3%;width: 100%;border: 1px solid #ccc;">合格率-显示当天</div>
        <div id="drawLineChart_day61" style="height: 33.3%;width: 100%;border: 1px solid #ccc;">设备稼动率</div>
        <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>
    </div> -->
  </div>
</template>
<style scoped>
.float{
  float: left;
}
.style{
  width: 600px; 
  height: 400px;
  border: 1px solid #ccc;
}
.chart {
  height: 400px;
}
</style>