完善大屏显示页面，调整所有页面的适配样式，调整大理片笼的分页显示及笼子信息

wangfei

2024-07-15 3427eb80cd70e8be1ad8caac14c37c88a4edc5e0

 UI-Project/src/views/largescreen/largescreen.vue

@@ -2,12 +2,10 @@
    <el-card style="flex: 1;margin-left: 10px;margin-top: 10px;margin-right: 10px;" v-loading="loading">
      <el-scrollbar height="600px">
  <div id="top" style="height: 150px;display: flex;">  
    <div v-for="(rect, index) in adjustedRects"
     :key="index" 
     :style="{ width: '1000px', height: '100px',margin: '5px',}">
     <div ref="setChartDom(index, $el)" style="width: 100%; height: 100%;"></div>  
      <div style="text-align: center;">
      {{ rect.thisProcess }}</div>
  <div class="echarts-container">
  <div v-for="(processData, index) in processesData" :key="index" class="echarts-item">
    <div :id="'pieChart_' + index" class="pie-chart"></div>
  </div>
    </div>  
  </div> 
  <div style="display: flex;">
@@ -65,8 +63,8 @@
</div>
  </el-scrollbar>
  </el-card>
  <el-dialog v-model="blinda" top="10vh" width="80%" :title="$t('large.brokeno')">
    <el-table height="500" ref="table" 
<el-dialog v-model="blinda" top="5vh" width="80%" :title="$t('large.brokeno')">
  <el-table height="400" ref="table" 
        @selection-change="handleSelectionChange"
        :data="tableData" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <el-table-column prop="reportingWorkTime" fixed align="center" :label="$t('large.time')" min-width="110" />
@@ -97,7 +95,7 @@
          <el-table-column prop="qualityInspector" align="center" :label="$t('large.inspector')" min-width="110" />
        </el-table>
    <template #footer>
      <div id="dialog-footer">
    <div id="dialog-footer" style="text-align: center;">
        <el-button @click="blinda = false">{{ $t('large.close') }}</el-button>
      </div>
    </template>
@@ -126,6 +124,9 @@
const handleBinda = (row) => {
  blinda.value = true;
};
const processesData = ref([

]);
function getStatusType(warehousing) {  
  switch (warehousing) {  
    case 0:  
@@ -171,43 +172,39 @@
  socket = new WebSocket(socketUrl);  
  socket.onmessage = (event) => {  
    const data = JSON.parse(event.data);  
    adjustedRects.value = data.device[0].map(rect => ({  
  processesData.value = data.device[0].map(rect => ({  
      ...rect,  
      completedQuantity: rect.completedQuantity,  
      breakageQuantity: rect.breakageQuantity,  
      thisProcess: rect.thisProcess,  
    }));  
    console.log(adjustedRects.value);
  renderPieCharts();
  console.log(processesData.value);
    // updateCharts();
  };
    adjustedRects.value.forEach((rect, index) => {  
      initChart(index, rect);  
    });  
  
  // };  
});  
  
  
function initChart(index, rect) {  
  const { dom } = chartRefs.value[index] || { dom: null };  
  if (dom) {  
    const chart = echarts.init(dom);  
    const option = {   
    tooltip: {  
      trigger: 'item'  
const renderPieCharts = () => {
processesData.value.forEach((data, index) => {
  const chart = echarts.init(document.getElementById('pieChart_' + index));
  const options = {
    title: {
        text: `${data.thisProcess} `,
        left: 'center',
    },  
    legend: {  
      orient: 'vertical',  
      left: 'left',  
    tooltip: {
      trigger: 'item',
    },  
    series: [  
      {  
        name: '饼状图',  
        name: `${data.thisProcess} `,
        type: 'pie',  
        radius: ['50%','70%'],  
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        data: [  
          {value: rect.completedQuantity, name: '加工数量'},  
          {value: rect.breakageQuantity, name: '次破数量'},  
        console.log(rect.breakageQuantity)
          { value: data.completedQuantity, name: t('large.completedquantity') },
          { value: data.breakageQuantity, name: t('large.scrapquantity') }
        ], 
        emphasis: {  
          itemStyle: {  
@@ -215,68 +212,23 @@
            shadowOffsetX: 0,  
            shadowColor:  'rgba(0, 0, 0, 0.5)'  
          }  
        }  
        },
        label: {
          show: false,
          position: 'center',
        },
      labelLine: {
        show: false
      },
      }  
    ]  
  };  
    chart.setOption(option);  
    chartRefs.value[index] = { ...chartRefs.value[index], chart };  

}  
console.log(chartRefs.value[index]);
}  
  chart.setOption(options);
});
};
  
// 更新图表  
// function updateCharts() {  
//   adjustedRects.value.forEach((rect, index) => {  
//     const { chart } = chartRefs.value[index] || { chart: null };  
//     if (chart) {  
//       chart.setOption({  
//         series: [{  
//           data: [  
//             { value: rect.completedQuantity, name: '加工数量' },  
//             { value: rect.breakageQuantity, name: '次破数量' },  
//           ],  
//         }],  
//       });  
//     }  
//   });  
// }  
// 初始化图表  
// function initChart(index, rect) {  
//   const chartDom = ref(`chartDom${index}`).value;  
//   console.log(ref(`chartDom${index}`).value);
//   const chart = echarts.init(chartDom);  
//   const option = {   
//     tooltip: {  
//       trigger: 'item'  
//     },  
//     legend: {  
//       orient: 'vertical',  
//       left: 'left',  
//     },  
//     series: [  
//       {  
//         name: '饼状图',  
//         type: 'pie',  
//         radius: ['50%','70%'],  
//         data: [  
//           {value: rect.completed, name: '加工数量'},  
//           {value: rect.breakage, name: '次破数量'},  
//         ],  
//         emphasis: {  
//           itemStyle: {  
//             shadowBlur: 10,  
//             shadowOffsetX: 0,  
//             shadowColor:  'rgba(0, 0, 0, 0.5)'  
//           }  
//         }  
//       }  
//     ]  
//   };  
//   chart.setOption(option);  
// }  
// 清理 WebSocket 连接  

onUnmounted(() => {  
  socket.close();  
});  
@@ -285,6 +237,7 @@
  // fetchFlowCardId();
  // fetchTableData(); // 获取数据
  initializeWebSocket(socketUrl, handleMessage);

});
onBeforeUnmount(() => {
  console.log("关闭了")
@@ -293,19 +246,23 @@
</script>  
  
<style scoped>  
.rect {  
  border: 1px solid black; /* 设置矩形的边框 */  
  /* background-color: lightblue; 设置矩形的背景色   */
} 
.centered-text {
  /* 设置文字居中样式 */  



.echarts-container {
  display: flex;  
  justify-content: center;  
  align-items: center;  
  height: 100%; /* 确保div占据整个矩形的高度 */  
flex-wrap: wrap;
gap: 20px;
} 
#dialog-footer{
  text-align: center;
  margin-top: -15px;

.echarts-item {
width: 150px;
height: 150px;
margin: 20px;
}

.pie-chart {
width: 100%;
height: 100%;
}
</style>