看板修改：按客户所需内容3.12号文件调整

严智鑫

2025-03-21 8ba5b88ffa394d06b81ae1802e5ebd075d34050a

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

@@ -1,12 +1,13 @@
<!--  空白页  -->
 
 


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

const energyData = ref([])
const notCompleteData = ref([])

// 获取能耗数据
const loadEnergyData = async () => {
@@ -24,20 +25,37 @@
  }
}

// 获取未完成数据
const loadNotCompleteData = async () => {

  request.post('/deviceInteraction/primitiveTask/findDayNotCompleteOutput',
      {
        "dayCount": 2
      }).then((res) => {
        if (res.code == 200) {
          notCompleteData.value = res.data;
          
          console.log("未完成"+res.data+"1");
        } else {
          console.error('请求当日产量数据失败:', error);
        }
      });
}

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

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

// 更新能耗图表
const updateEnergyChart = () => {
  // 按日期排序并格式化日期
  const sortedData = [...energyData.value].sort((a, b) => 
  const sortedData = [...energyData.value].sort((a, b) =>
    new Date(a.recordDate) - new Date(b.recordDate)
  ).map(item => {
    const date = new Date(item.recordDate);
@@ -56,7 +74,7 @@
      axisPointer: {
        type: 'cross',
        label: {
              backgroundColor: '#6a7985'
          backgroundColor: '#6a7985'
        }
      }
    },
@@ -99,193 +117,310 @@
      }
    ]
  }
  

  drawDay('drawLineChart_day71', energyoption);
}

onMounted(() => {
  loadEnergyData()
  loadEnergyData();
  loadNotCompleteData();
})
</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]
    const OptionDayMode = {
      title: {
        text: '计划量看板'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {},
      toolbox: {
        show: true,
        feature: {
          dataZoom: {
            yAxisIndex: 'none'
          },
          {
            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]
          dataView: { readOnly: false },
          magicType: { type: ['line', 'bar'] },
          restore: {},
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          formatter: '{value} '
        }
      },
      series: [
        {
          name: '平方',
          type: 'line',
          data: [10.3, 11.9, 13.9, 19, 12.8, 12, 9],
          markPoint: {
            data: [
              { type: 'max', name: 'Max' },
              { type: 'min', name: 'Min' }
            ]
          },
          markLine: {
            data: [{ type: 'average', name: 'Avg' }]
          }
        ]
 
      }
     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);
        },
        {
          name: '片数',
          type: 'line',
          data: [1, -2, 2, 5, 3, 2, 0],
          markPoint: {
            data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
          },
          markLine: {
            data: [
              { type: 'average', name: 'Avg' },
              [
                {
                  symbol: 'none',
                  x: '90%',
                  yAxis: 'max'
                },
                {
                  symbol: 'circle',
                  label: {
                    position: 'start',
                    formatter: 'Max'
                  },
                  type: 'max',
                  name: '最高点'
                }
              ]
            ]
          }
        }
      ]
    };
    const OptionYear = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {},
      toolbox: {
        show: true,
        feature: {
          dataZoom: {
            yAxisIndex: 'none'
          },
          dataView: { readOnly: false },
          magicType: { type: ['line', 'bar'] },
          restore: {},
          saveAsImage: {}
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '计划量',
          type: 'bar',
          emphasis: {
            focus: 'series'
          },
          label: {
            show: true,
            formatter: (params) => params.value + '片'
          },
          data: [1000, 1000, 1000, 1000, 1000, 1000, 1000]
        },
        {
          name: '一线',
          type: 'bar',
          stack: 'Search Engine',
          emphasis: {
            focus: 'series'
          },
          label: {
            show: true,
            formatter: (params) => params.value + '片'
          },
          data: [400, 450, 500, 490, 460, 380, 210]
        },
        {
          name: '二线',
          type: 'bar',
          stack: 'Search Engine',
          label: {
            show: true,
            formatter: (params) => params.value + '片'
          },
          emphasis: {
            focus: 'series'
          },
          data: [500, 400, 300, 400, 400, 290, 700]
        }
      ]
    };
    //请求当日产量
    request.post('/deviceInteraction/primitiveTask/findDailyOutput',
      {
        "dayCount": 1
      }).then((res) => {
        if (res.code == 200) {
          const modeOptions = res.data;
          this.drawDay('drawLineChart_day11', OptionYear, modeOptions);
          // this.drawDay('drawLineChart_day31', OptionYear, modeOptions);
          // this.drawYear('drawLineChart_day51', OptionDayMode, modeOptions);
        } else {
          console.error('请求当日产量数据失败:', error);
        }
      });

    //请求日产量-月
    request.post('/deviceInteraction/primitiveTask/findDailyOutput',
      {
        "dayCount": 30
      }).then((res) => {
        if (res.code == 200) {
          const modeOptions = res.data;
          //this.drawDay('drawLineChart_day11', OptionYear, modeOptions);
          this.drawDay('drawLineChart_day31', OptionYear, modeOptions);
          // this.drawYear('drawLineChart_day51', OptionDayMode, modeOptions);
        } else {
          console.error('请求日产量-月数据失败:', error);
        }
      });
      //请求计划量
    request.post('/deviceInteraction/primitiveTask/findPlannedQuantity',
      {
        "dayCount": 30
      }).then((res) => {
        if (res.code == 200) {
          const modeOptions = res.data;
          this.drawYear('drawLineChart_day51', OptionDayMode, modeOptions);
          let textDay=document.getElementById('textDay');
          let textprice=document.getElementById('textprice');
          let textarea=document.getElementById('textarea');

          let y_pingfang = res.data.map(v => { return v.area_sum });
          let y_pianshu = res.data.map(v => { return v.task_quantity_sum });
          let y_pingfang_sum = 0;
          let y_pianshu_sum =0;
          for(let i=0;i<y_pingfang.length;i++){
            y_pingfang_sum+=y_pingfang[i];
          }
          for(let i=0;i<y_pianshu.length;i++){
            y_pianshu_sum+=y_pianshu[i];
          }
        
          textDay.innerHTML="日期："+res.data[0].CreateDate +  "-" +res.data[res.data.length-1].CreateDate;
          textprice.innerHTML="片数："+y_pianshu_sum;
          textarea.innerHTML="平方数："+y_pingfang_sum;
          // this.drawYear('drawLineChart_day51', OptionDayMode, modeOptions);
        } else {
          console.error('请求计划量-月数据失败:', error);
        }
      });

  },
  methods: {
    draw(name, Option, data) {
    draw(name, Option) {
      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);
      //Option.title.text="日看板";
      //日看板- 计划量，一线完成，二线完成（片数）
      let x_data = data.map(v => { return v.date });
      let y_jihua = data.map(v => { return v.plan });
      let y_one = data.map(v => { return v.line1 });
      let y_two = data.map(v => { return v.line2 });
      Option.xAxis[0].data = x_data;
      Option.series[0].data = y_jihua;
      Option.series[1].data = y_one;
      Option.series[2].data = y_two;
      this.draw(name, 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}'
            }
          }
        ]
 
 
      });
    drawYear(name, Option, data) {
      //计划量- 平方，片数
      let x_data = data.map(v => { return v.CreateDate });
      let y_pingfang = data.map(v => { return v.area_sum });
      let y_pianshu = data.map(v => { return v.task_quantity_sum });
      Option.xAxis.data = x_data;
      Option.series[0].data = y_pingfang;
      Option.series[1].data = y_pianshu;
      this.draw(name, Option);
    },
    requsstData() {

    }
  }
}
</script>
 

<template>
  <div>
    <div style="font-size: 30px;height: 70px;line-height: 70px;border: 1px solid #ccc;text-align: center;">
    <div style="font-weight: 800;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 style="width:100% ;height: 33.3%;border: 1px solid #ccc;">
        <div id="drawLineChart_day11" style="height: 100%;width: 20%;border: 1px solid #ccc;float: left;">日单达成率-片数</div>
        <div id="drawLineChart_day12" style="height: 100%;width: 30%;max-height: 260px;border: 1px solid #ccc;float: left;">
          <!-- 表格内容详情 -->
          <div style="font-weight: 700;font-size: 20px;height: 30px;line-height: 30px;border: 1px solid #ccc;text-align: center;">当日未完成量</div>
          <el-table :data="notCompleteData" stripe
            height="260px"
            :header-cell-style="{ background: '#F2F3F5 ', color: '#1D2129', textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }">
            <!-- <el-table-column type="selection" min-width="30" /> -->
            <el-table-column prop="scanId" :label="$t('glassInfo.scanId')" />
            <el-table-column prop="notComplete" :label="$t('glassInfo.notCompleteCount')" />
            <el-table-column prop="area_sum" :label="$t('glassInfo.notCompleteArea')" />
          </el-table>
        </div>
        <div id="drawLineChart_day71" style="height: 100%;width: 50%;border: 1px solid #ccc;float: left;">能耗管理-按天显示（手输）
        </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 style="width:100% ;height: 33.3%;border: 1px solid #ccc;">
        <div id="drawLineChart_day31" style="height: 100%;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 style="width:100% ;height: 33.3%;border: 1px solid #ccc;">
        <div id="drawLineChart_day51" style="height: 100%;width: 80%;border: 1px solid #ccc;float: left;">计划量-片数、平方</div>
        <div id="drawLineChart_day91" style="height: 100%;width: 20%;float: left;">
          <div style="font-weight: 700;font-size: 20px;height: 30px;line-height: 30px;text-align: center;border: 1px solid #ccc;">总计划量-片数、平方</div>
          <div id="textDay" style="font-size: 20px;height: 30px;margin-left: 20px;margin-top: 20px;">日期：2023-03-01  - 2023-03-01</div>
          <div id="textprice" style="font-size: 20px;height: 30px;margin-left: 20px;margin-top: 20px;">片数：25</div>
          <div id="textarea" style="font-size: 20px;height: 30px;margin-left: 20px;margin-top: 20px;">平方数：2999</div>
        </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>
@@ -293,14 +428,16 @@
  </div>
</template>
<style scoped>
.float{
.float {
  float: left;
}
.style{
  width: 600px; 

.style {
  width: 600px;
  height: 400px;
  border: 1px solid #ccc;
}

.chart {
  height: 400px;
}