添加产量报表功能页面

huang

2025-05-20 2c2413760b6467bf62402dba7338bd3bbcbd7341

 UI-Project/src/views/KanbanDisplay2/kanbanDisplay2.vue

@@ -1,12 +1,61 @@
<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
import * as echarts from 'echarts'
import request from '@/utils/request'
import { useRoute } from 'vue-router'

const route = useRoute()
const dashboardRef = ref(null)
const standardWidth = 2220 // 设计稿标准宽度
const standardHeight = 1224 // 设计稿标准高度，
const standardHeight = 1224 // 设计稿标准高度

// 从路由参数中获取目标值
const yieldTarget1 = ref(Number(localStorage.getItem('yieldTarget1')) || Number(route.query.yieldTarget1) || 0)
const yieldTarget2 = ref(Number(localStorage.getItem('yieldTarget2')) || Number(route.query.yieldTarget2) || 0)
const utilizationTarget1 = ref(Number(localStorage.getItem('utilizationTarget1')) || Number(route.query.utilizationTarget1) || 0)
const utilizationTarget2 = ref(Number(localStorage.getItem('utilizationTarget2')) || Number(route.query.utilizationTarget2) || 0)
const quantityTarget1 = ref(Number(localStorage.getItem('quantityTarget1')) || Number(route.query.quantityTarget1) || 0)
const quantityTarget2 = ref(Number(localStorage.getItem('quantityTarget2')) || Number(route.query.quantityTarget2) || 0)
const quantityTarget3 = ref(Number(localStorage.getItem('quantityTarget3')) || Number(route.query.quantityTarget3) || 0)

// 监听路由参数变化
watch(() => route.query, (newQuery) => {
  if (newQuery.yieldTarget1) {
    yieldTarget1.value = Number(newQuery.yieldTarget1)
    localStorage.setItem('yieldTarget1', newQuery.yieldTarget1)
    updateOptionYield(yieldTarget1.value, yieldTarget2.value)
  }
  if (newQuery.yieldTarget2) {
    yieldTarget2.value = Number(newQuery.yieldTarget2)
    localStorage.setItem('yieldTarget2', newQuery.yieldTarget2)
    updateOptionYield(yieldTarget1.value, yieldTarget2.value)
  }
  if (newQuery.utilizationTarget1) {
    utilizationTarget1.value = Number(newQuery.utilizationTarget1)
    localStorage.setItem('utilizationTarget1', newQuery.utilizationTarget1)
    updateOptionUtilization(utilizationTarget1.value, utilizationTarget2.value)
  }
  if (newQuery.utilizationTarget2) {
    utilizationTarget2.value = Number(newQuery.utilizationTarget2)
    localStorage.setItem('utilizationTarget2', newQuery.utilizationTarget2)
    updateOptionUtilization(utilizationTarget1.value, utilizationTarget2.value)
  }
  if (newQuery.quantityTarget1) {
    quantityTarget1.value = Number(newQuery.quantityTarget1)
    localStorage.setItem('quantityTarget1', newQuery.quantityTarget1)
    updateOptionQuantity(quantityTarget1.value, quantityTarget2.value, quantityTarget3.value)
  }
  if (newQuery.quantityTarget2) {
    quantityTarget2.value = Number(newQuery.quantityTarget2)
    localStorage.setItem('quantityTarget2', newQuery.quantityTarget2)
    updateOptionQuantity(quantityTarget1.value, quantityTarget2.value, quantityTarget3.value)
  }
  if (newQuery.quantityTarget3) {
    quantityTarget3.value = Number(newQuery.quantityTarget3)
    localStorage.setItem('quantityTarget3', newQuery.quantityTarget3)
    updateOptionQuantity(quantityTarget1.value, quantityTarget2.value, quantityTarget3.value)
  }
}, { deep: true })

// 计算缩放比例并应用
const setScale = () => {
@@ -70,7 +119,7 @@
    });
    if (res.code === 200) {
      yieldData.value = res.data;
      updateOptionYield();
      updateOptionYield(yieldTarget1.value, yieldTarget2.value);
    }
  } catch (error) {
    console.error('获取单小时产量数据失败:', error);
@@ -85,7 +134,7 @@
    });
    if (res.code === 200) {
      utilizationData.value = res.data;
      updateOptionUtilization();
      updateOptionUtilization(utilizationTarget1.value, utilizationTarget2.value);
    }
  } catch (error) {
    console.error('获取利用率数据失败:', error);
@@ -100,7 +149,7 @@
    });
    if (res.code === 200) {
      quantityData.value = res.data;
      updateOptionQuantity();
      updateOptionQuantity(quantityTarget1.value, quantityTarget2.value, quantityTarget3.value);
    }
  } catch (error) {
    console.error('获取在制量数据失败:', error);
@@ -405,7 +454,7 @@
  draw('drawLineChart_day51', OptionDayMode)
}

const updateOptionYield = () => {
const updateOptionYield = (targetValue1, targetValue2) => {
  // 按日期排序并处理数据
  const sortedData = [...yieldData.value].sort((a, b) =>
    new Date(a.recordTime) - new Date(b.recordTime)
@@ -434,7 +483,8 @@

  // 单小时产量的配置 - 分上下两个子图表
  const OptionYield = {
    title: {
    title: [
      {
      text: '单小时产量',
      textStyle: {
        fontSize: 20,
@@ -442,6 +492,23 @@
        color: 'white'
      }
    },
      {
        text: '目标' + targetValue1,
        bottom: 140, //
        textStyle: {
          color: 'white',
          fontSize: 17
        },
      },
      {
        text: '目标' + targetValue2,
        bottom: 35, // 
        textStyle: {
          color: 'white',
          fontSize: 17
        },
      },
    ],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
@@ -454,10 +521,11 @@
      x: 'left',
      y: 'center',
      orient: 'vertical',
      itemGap: 90,
      textStyle: {
        fontSize: 20,
        fontWeight: 'bold',
        color: 'white',
        color: 'white'
      }
    },
    grid: [{
@@ -558,6 +626,20 @@
        areaStyle: {
          color: '#000000',
          opacity: 0.3
        },
        markLine: {
          data: [
            {
              yAxis: targetValue1,
              name: 'Line',
              label: {
                formatter: '',
              },
              lineStyle: {
                width: 2,
              }
            }
          ]
        }
      },
      {
@@ -584,6 +666,20 @@
        areaStyle: {
          color: 'white',
          opacity: 0.3
        },
        markLine: {
          data: [
            {
              yAxis: targetValue2,
              name: 'Line',
              label: {
                formatter: '',
              },
              lineStyle: {
                width: 2,
              }
            }
          ]
        }
      }
    ]
@@ -598,7 +694,7 @@
  draw('drawLineChart_yield', OptionYield)
}

const updateOptionUtilization = () => {
const updateOptionUtilization = (targetValue1, targetValue2) => {
  // 按日期排序并处理数据
  const sortedData = [...utilizationData.value].sort((a, b) =>
    new Date(a.recordTime || a.recordDate) - new Date(b.recordTime || b.recordDate)
@@ -627,7 +723,8 @@

  // 利用率的配置 - 分上下两个子图表
  const OptionUtilization = {
    title: {
    title: [
      {
      text: '利用率',
      textStyle: {
        fontSize: 20,
@@ -635,6 +732,23 @@
        color: 'white'
      }
    },
      {
        text: '目标' + targetValue1 + '%',
        bottom: 140, //
        textStyle: {
          color: 'white',
          fontSize: 17
        },
      },
      {
        text: '目标' + targetValue2 + '%',
        bottom: 35, // 
        textStyle: {
          color: 'white',
          fontSize: 17
        },
      },
    ],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
@@ -647,6 +761,7 @@
      x: 'left',
      y: 'center',
      orient: 'vertical',
      itemGap: 90,
      textStyle: {
        fontSize: 20,
        fontWeight: 'bold',
@@ -774,6 +889,20 @@
        areaStyle: {
          color: '#000000',
          opacity: 0.3
        },
        markLine: {
          data: [
            {
              yAxis: targetValue1,
              name: 'Line',
              label: {
                formatter: '',
              },
              lineStyle: {
                width: 2,
              }
            }
          ]
        }
      },
      {
@@ -801,6 +930,20 @@
        areaStyle: {
          color: 'white',
          opacity: 0.3
        },
        markLine: {
          data: [
            {
              yAxis: targetValue2,
              name: "line",
              label: {
                formatter: '',
              },
              lineStyle: {
                width: 2,
              }
            }
          ]
        }
      }
    ]
@@ -816,8 +959,9 @@
  
}

const updateOptionQuantity = () => {
const updateOptionQuantity = (targetValue1, targetValue2, targetValue3) => {
  // 按日期排序并处理数据

  const sortedData = [...quantityData.value].sort((a, b) =>
    new Date(a.recordTime || a.recordDate) - new Date(b.recordTime || b.recordDate)
  );
@@ -848,7 +992,7 @@

  // 在制量的配置 - 上中下三层布局
  const OptionQuantity = {
    title: {
    title: [{
      text: '在制量',
      textStyle: {
        fontSize: 20,
@@ -856,6 +1000,31 @@
        color: 'white'
      }
    },
    {
      text: '目标' + targetValue1,
      bottom: 160, //
      textStyle: {
        color: 'white',
        fontSize: 17
      },
    },
    {
      text: '目标' + targetValue2,
      bottom: 95, // 
      textStyle: {
        color: 'white',
        fontSize: 17
      },
    },
    {
      text: '目标' + targetValue3,
      bottom: 20, // 
      textStyle: {
        color: 'white',
        fontSize: 17
      },
    },
    ],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
@@ -868,6 +1037,7 @@
      x: 'left',
      y: 'center',
      orient: 'vertical',
      itemGap: 50,
      textStyle: {
        fontSize: 20,
        fontWeight: 'bold',
@@ -1014,6 +1184,20 @@
        areaStyle: {
          color: '#91cc75',
          opacity: 0.3
        },
        markLine: {
          data: [
            {
              yAxis: targetValue1,
              name: 'Line',
              label: {
                formatter: '',
              },
              lineStyle: {
                width: 2,
              }
            }
          ]
        }
      },
      {
@@ -1040,6 +1224,20 @@
        areaStyle: {
          color: '#000000',
          opacity: 0.3
        },
        markLine: {
          data: [
            {
              yAxis: targetValue2,
              name: 'Line',
              label: {
                formatter: '',
              },
              lineStyle: {
                width: 2,
              }
            }
          ]
        }
      },
      {
@@ -1066,6 +1264,20 @@
        areaStyle: {
          color: 'white',
          opacity: 0.3
        },
        markLine: {
          data: [
            {
              yAxis: targetValue3,
              name: 'Line',
              label: {
                formatter: '',
              },
              lineStyle: {
                width: 2,
              }
            }
          ]
        }
      }
    ]
@@ -1086,33 +1298,87 @@
  window.addEventListener('resize', handleResize)

  // 确保DOM加载完成后再初始化图表
  nextTick(() => {
    loadNotCompleteData();
    loadYieldData();
    loadUtilizationData();
    loadInventoryData();
    loadPlannedData();
  });
  nextTick(async () => {
    try {
      // 从localStorage中获取目标值，如果没有则从路由参数获取，都没有则使用默认值0
      yieldTarget1.value = Number(localStorage.getItem('yieldTarget1')) || Number(route.query.yieldTarget1) || 0
      yieldTarget2.value = Number(localStorage.getItem('yieldTarget2')) || Number(route.query.yieldTarget2) || 0
      utilizationTarget1.value = Number(localStorage.getItem('utilizationTarget1')) || Number(route.query.utilizationTarget1) || 0
      utilizationTarget2.value = Number(localStorage.getItem('utilizationTarget2')) || Number(route.query.utilizationTarget2) || 0
      quantityTarget1.value = Number(localStorage.getItem('quantityTarget1')) || Number(route.query.quantityTarget1) || 0
      quantityTarget2.value = Number(localStorage.getItem('quantityTarget2')) || Number(route.query.quantityTarget2) || 0
      quantityTarget3.value = Number(localStorage.getItem('quantityTarget3')) || Number(route.query.quantityTarget3) || 0

  // 设置定时刷新
  const refreshInterval = setInterval(() => {
    loadYieldData();
    loadUtilizationData();
    loadInventoryData();
    loadPlannedData();
    console.log('数据已刷新');
  }, 30000); // 每分钟刷新一次
      // 按顺序加载数据
      await loadNotCompleteData()
      await loadYieldData()
      await loadUtilizationData()
      await loadInventoryData()
      await loadPlannedData()

      // 设置定时刷新数据
      const refreshInterval = setInterval(async () => {
        try {
          await loadYieldData()
          await loadUtilizationData()
          await loadInventoryData()
          await loadPlannedData()
          console.log('数据已刷新')
        } catch (error) {
          console.error('数据刷新失败:', error)
        }
      }, 15000) // 每15秒刷新一次

      // 添加监听localStorage变化的定时器
      const checkTargetsInterval = setInterval(() => {
        const newYieldTarget1 = Number(localStorage.getItem('yieldTarget1'))
        const newYieldTarget2 = Number(localStorage.getItem('yieldTarget2'))
        const newUtilizationTarget1 = Number(localStorage.getItem('utilizationTarget1'))
        const newUtilizationTarget2 = Number(localStorage.getItem('utilizationTarget2'))
        const newQuantityTarget1 = Number(localStorage.getItem('quantityTarget1'))
        const newQuantityTarget2 = Number(localStorage.getItem('quantityTarget2'))
        const newQuantityTarget3 = Number(localStorage.getItem('quantityTarget3'))

        // 检查目标值是否有变化
        if (newYieldTarget1 !== yieldTarget1.value || newYieldTarget2 !== yieldTarget2.value) {
          yieldTarget1.value = newYieldTarget1
          yieldTarget2.value = newYieldTarget2
          updateOptionYield(newYieldTarget1, newYieldTarget2)
        }
        if (newUtilizationTarget1 !== utilizationTarget1.value || newUtilizationTarget2 !== utilizationTarget2.value) {
          utilizationTarget1.value = newUtilizationTarget1
          utilizationTarget2.value = newUtilizationTarget2
          updateOptionUtilization(newUtilizationTarget1, newUtilizationTarget2)
        }
        if (newQuantityTarget1 !== quantityTarget1.value || 
            newQuantityTarget2 !== quantityTarget2.value || 
            newQuantityTarget3 !== quantityTarget3.value) {
          quantityTarget1.value = newQuantityTarget1
          quantityTarget2.value = newQuantityTarget2
          quantityTarget3.value = newQuantityTarget3
          updateOptionQuantity(newQuantityTarget1, newQuantityTarget2, newQuantityTarget3)
        }
      }, 1000) // 每秒检查一次

  onUnmounted(() => {
    clearInterval(refreshInterval);
  });
        clearInterval(refreshInterval)
        clearInterval(checkTargetsInterval)
      })
    } catch (error) {
      console.error('初始化数据失败:', error)
    }
  })
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  // 清理所有图表实例
  charts.forEach(chart => {
    if (chart && !chart.isDisposed()) {
    chart.dispose()
    }
  })
  charts.length = 0
})

</script>
@@ -1139,8 +1405,8 @@
                总计划量-片数、平方</div>
              <div id="textDay" style="font-size: 20px;height: 30px;margin-left: 20px;margin-top: 20px;">日期：</div>
              <br>
              <div id="textprice" style="font-size: 20px;height: 30px;margin-left: 20px;margin-top: 20px;">片数：</div>
              <div id="textarea" style="font-size: 20px;height: 30px;margin-left: 20px;margin-top: 20px;">平方数：</div>
              <div id="textprice" style="font-size: 20px;height: 30px;margin-left: 20px;margin-top: 20px;">片数：</div>
            </div>
          </div>

@@ -1167,9 +1433,10 @@

<script>
export default {
  mounted() {

    const OptionYear = {
  data() {
    return {
      timer: null,
      OptionYear: {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
@@ -1180,32 +1447,26 @@
          }
        }
      },
        title: {
          text: '已完成                    已完成',
          left: '48%',
          bottom: 0, // 
          textStyle: {
            color: 'white',
            fontSize: 16
          },
        },
      legend: {
        data: ['计划量', '一线', '二线'],
        icon: 'roundRect',
        itemGap: 50,
        y:'bottom',
          itemGap: 90,
          y: '80%',
        textStyle: {
          fontSize: 20,
          fontWeight: 'bold',
          color: 'white'
        }
      },
      // toolbox: {
      //   show: true,
      //   feature: {
      //     dataZoom: {
      //       yAxisIndex: 'none'
      //     },
      //     dataView: { readOnly: false },
      //     magicType: { type: ['line', 'bar'] },
      //     restore: {},
      //     saveAsImage: {}
      //   },
      //   iconStyle: {
      //     color: 'white' // 设置工具框图标颜色为白色
      //   }
      // },
      grid: {
        left: '3%',
        right: '4%',
@@ -1221,7 +1482,6 @@
          axisLabel: {
            fontSize: 20,
            interval: 'auto',
            margin: 15,
            formatter: (value, index) => {
              // 如果是日期格式
              if (value.includes('-')) {
@@ -1240,7 +1500,8 @@
            fontSize: 20,
            color: 'white' // 设置 x 轴名称颜色为白色
          },
          position: 'top'
            position: 'top',
            offset: 15 // 调整 x 轴标签的位置
        }
      ],
      yAxis: [
@@ -1281,7 +1542,7 @@
            formatter: (params) => params.value,
            color: 'white',
            position: 'top'
          },
            }
        },
        {
          name: '二线',
@@ -1297,76 +1558,23 @@
            formatter: (params) => params.value,
            color: 'white',
            position: 'top'
          },
            }
        }
      ]
    };


    // 请求当日产量
    // request.post('/deviceInteraction/primitiveTask/findDailyOutput',
    //   {
    //     "dayCount": 1
    //   }).then((res) => {
    //     if (res.code == 200) {
    //       const modeOptions = res.data;
    //       console.log("获取当日产量",modeOptions);
    //       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;
          const modeOptions2 = [res.data[res.data.length - 1]];
          // this.drawDay('drawLineChart_day11', OptionYear, modeOptions);
          //this.drawDay('drawLineChart_day31', OptionYear, modeOptions);
          // this.drawYear('drawLineChart_day51', OptionDayMode, modeOptions);
          this.drawDay('drawLineChart_day11', OptionYear, modeOptions2);
        } 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 = "日期：" + "<br>" + res.data[0].CreateDate + " - " + res.data[res.data.length - 1].CreateDate;
    //       textprice.innerHTML = "片数：" + y_pianshu_sum;
    //       textarea.innerHTML = "平方数：" + Number(y_pingfang_sum).toFixed(2);
    //       // this.drawYear('drawLineChart_day51', OptionDayMode, modeOptions);
    //     } else {
    //       console.error('请求计划量-月数据失败:', error);
    //     }
    //   });

    };
  },
  mounted() {
    this.fetchData();
    // 每半分钟刷新一次数据
    this.timer = setInterval(() => {
      this.fetchData();
    }, 30000);
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    draw(name, Option) {
@@ -1374,9 +1582,6 @@
      myChart.setOption(Option);
    },
    drawDay(name, Option, data) {
      // console.log(data);
      //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 });
@@ -1388,7 +1593,6 @@
      this.draw(name, Option);
    },
    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 });
@@ -1398,37 +1602,24 @@
      Option.series[1].data = y_pianshu;
      this.draw(name, Option);
    },
    requsstData() {

    },
    // // 渲染单小时产量图表
    // drawYieldChart(data) {
    //   const option = { ...OptionYield };
    //   option.xAxis.data = data.map(v => v.date);
    //   option.series[0].data = data.map(v => v.line1_yield);
    //   option.series[1].data = data.map(v => v.line2_yield);
    //   this.draw('drawLineChart_yield', option);
    // },
    // // 渲染利用率图表
    // drawUtilizationChart(data) {
    //   const option = { ...OptionUtilization };
    //   option.xAxis.data = data.map(v => v.date);
    //   option.series[0].data = data.map(v => v.line1_utilization);
    //   option.series[1].data = data.map(v => v.line2_utilization);
    //   this.draw('drawLineChart_utilization', option);
    // },
    // // 渲染在制量图表
    // drawQuantityChart(data) {
    //   const option = { ...OptionQuantity };
    //   option.xAxis.data = data.map(v => v.date);
    //   option.series[0].data = data.map(v => v.semi_finished);
    //   option.series[1].data = data.map(v => v.location_7014);
    //   option.series[2].data = data.map(v => v.location_7016);
    //   this.draw('drawLineChart_quantity', option);
    // },

    fetchData() {
      // 请求日产量-月
      request.post('/deviceInteraction/primitiveTask/findDailyOutput', {
        "dayCount": 30
      }).then((res) => {
        if (res.code == 200) {
          const modeOptions = res.data;
          const modeOptions2 = [res.data[res.data.length - 1]];
          this.drawDay('drawLineChart_day11', this.OptionYear, modeOptions2);
        } else {
          console.error('请求日产量-月数据失败:', res);
        }
      }).catch((error) => {
        console.error('请求数据时发生错误:', error);
      });
  }
}
};
</script>

<style scoped>