磨边前卧式缓存修改，大屏（部分）

wangfei

2024-07-12 fb7bfaa7077bca3cfd1abeced0983ff2de8ba87d

磨边前卧式缓存修改，大屏（部分）

 UI-Project/src/main.js

@@ -12,7 +12,9 @@
import 'vxe-table/lib/style.css'
import i18n from '@/lang'
// import Echarts from "vue-echarts"
// import * as echarts from "echarts"
import * as echarts from "echarts"
// echarts.registerMap('china', china)
// Vue.prototype.$echarts = echarts

// app.component("v-chart", Echarts)
// app.config.globalProperties.$echarts = echarts

 UI-Project/src/views/Caching/cachingbefore.vue

@@ -42,7 +42,7 @@
const toggleEnableState = async (row) => {  
  const newState = row.enable_state === 1 ? 0 : 1;
  // 发送请求到后端更新状态（这里省略了实际的请求逻辑）  
  const response = await request.post('/cacheGlass/edgStorageCage/updateEdgStorageCage', { id: row.id, enablestate: newState });  
  const response = await request.post('/cacheGlass/edgStorageCage/updateEdgStorageCage', { id: row.id, enableState: newState });  
  if (response.code === 200) {
      ElMessage.success(response.message);
      } else {  

 UI-Project/src/views/PurchaseReturn/purchaseStorage.vue

@@ -38,7 +38,7 @@
        widtha: rect.width,
        heighta: rect.height,
      })); 
      console.log(data.intoGlass[0]);
      console.log(adjustedRects.value);
};
onMounted(() => {
  // fetchFlowCardId();

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

@@ -1,15 +1,21 @@
<template>  
    <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;background-color: #911005;">  
    <v-chart ref="mychart1" class="chart" :option="optionPie "></v-chart>
  <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>  
  </div> 
  <div style="display: flex;">
  <div id="centerleft" style="margin-top: 10px;height: 240px;width: 340px;background-color: #911005;">
    <el-table height="240" ref="table" width="340px"
        @selection-change="handleSelectionChange"
        :data="tableData" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <el-table-column prop="orderId" align="center" :label="$t('large.number')" min-width="110" />
          <el-table-column fixed prop="orderId" align="center" :label="$t('large.number')" min-width="110" />
          <el-table-column prop="project" align="center" :label="$t('large.projectname')" min-width="100" />
          <el-table-column prop="responsibleProcess" align="center" :label="$t('large.responsibleprocess')" min-width="100" />
          <el-table-column prop="breakageQuantity" align="center" :label="$t('large.numberfractions')" min-width="110" />
@@ -38,7 +44,7 @@
        @selection-change="handleSelectionChange"
        :data="tableDatac" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <el-table-column prop="orderId" align="center" :label="$t('large.orderId')" min-width="50" />
          <el-table-column prop="customerName" align="center" :label="$t('large.customerName')" min-width="90" />
          <el-table-column prop="customerName" align="center" :show-overflow-tooltip="true" :label="$t('large.customerName')" min-width="90" />
          <el-table-column prop="project" align="center" :label="$t('large.project')" min-width="50" />
          <el-table-column prop="area" align="center" :label="$t('large.are')" min-width="50" />
          <el-table-column prop="quantity" align="center" :label="$t('large.quantity')" min-width="50" />
@@ -63,8 +69,8 @@
    <el-table height="500" ref="table" 
        @selection-change="handleSelectionChange"
        :data="tableData" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <el-table-column prop="reportingWorkTime" align="center" :label="$t('large.time')" min-width="110" />
          <el-table-column prop="orderId" align="center" :label="$t('large.number')" min-width="110" />
          <el-table-column prop="reportingWorkTime" fixed align="center" :label="$t('large.time')" min-width="110" />
          <el-table-column prop="orderId" fixed align="center" :label="$t('large.number')" min-width="110" />
          <el-table-column prop="reportingWorkId" align="center" :label="$t('large.jobnumber')" min-width="120" />
          <el-table-column prop="productionId" align="center" :label="$t('large.productionnumber')" min-width="130" />
          <el-table-column prop="processId" align="center" :label="$t('large.cardnumber')" min-width="140" />
@@ -72,7 +78,7 @@
          <el-table-column prop="batch" align="center" :label="$t('large.batch')" min-width="110" />
          <el-table-column prop="reviewer" align="center" :label="$t('large.detailID')" min-width="110" />
          <el-table-column prop="orderSort" align="center" :label="$t('large.serialnumber')" min-width="110" />
          <el-table-column prop="productName" align="center" :label="$t('large.productname')" min-width="180" />
          <el-table-column prop="productName" align="center" :label="$t('large.productname')" :show-overflow-tooltip="true" min-width="220" />
          <el-table-column prop="technologyNumber" align="center" :label="$t('large.serial')" min-width="110" />
          <el-table-column prop="glassAddress" align="center" :label="$t('large.slicemarker')" min-width="130" />
          <el-table-column prop="patchNum" align="center" :label="$t('large.numberpatches')" min-width="110" />
@@ -100,18 +106,22 @@
<script setup>  
import { Delete, Upload } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, onMounted , onBeforeUnmount, reactive, computed, watch, shallowRef } from "vue";
import { ref, onMounted , onBeforeUnmount, reactive, computed, shallowRef, onUnmounted, watchEffect } from "vue";
import request from "@/utils/request"
import { WebSocketHost ,host} from '@/utils/constants'
import { initializeWebSocket, closeWebSocket } from '@/utils/WebSocketService';
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
// import * as echarts from 'echarts';  
// import 'echarts/lib/chart/pie';  
// import 'echarts/dist/echarts.min.css';
import * as echarts from 'echarts';
const tableData = ref([])
const tableDatab = ref([])
const tableDatac = ref([])
const adjustedRects = ref([]);  
const chartRefs = ref([]);  
const thisProcess = ref(); // 用于存储process_id的响应式引用 
// 定义一个响应式引用来存储图表实例    
const chartDom = ref(null);  
let chartInstance = null;  
const blinda = ref(false)
const handleBinda = (row) => {
  blinda.value = true;
@@ -136,33 +146,141 @@
    return t('large.allstatus');
  }  
}  
// function getStatusType(warehousing: number) {  
//   switch (warehousing) {  
//     case 0:
//       return 'success';  
//     case 1: 
//       return 'primary';  
//     case 2: 
//       return 'danger';  
//   }  
// }  
// function getStatusText(warehousing: number) {
//   switch (warehousing) {
//     case 0:  
//       return t('large.notstocked');
//     case 1:  
//       return t('large.inboundstatus');
//     case 2:  
//     return t('large.allstatus');
//   }  
// }
const socketUrl = `ws://${WebSocketHost}:${host}/api/temperingGlass/api/talk/screen`;
const handleMessage = (data) => {
  // 更新 tableData 的数据
  tableData.value = data.awaitingRepairs[0]
  tableDatab.value = data.DoingTask[0]
  tableDatac.value = data.orders[0]
  // adjustedRects.value = data.device[0].map(rect => ({  
  //       ...rect, 
  //       completed: rect.completedQuantity,
  //       breakage: rect.breakageQuantity,
  //       thisProcess: rect.thisProcess,
  //     })); 
};
let socket;
// 设置图表 DOM 引用  
function setChartDom(index, el) {  
  if (!chartRefs.value[index]) {  
    chartRefs.value[index] = { dom: el, chart: null };  
  } else {  
    chartRefs.value[index].dom = el;  
  }  
} 
onMounted(() => {  
  socket = new WebSocket(socketUrl);  
  socket.onmessage = (event) => {  
    const data = JSON.parse(event.data);  
    adjustedRects.value = data.device[0].map(rect => ({  
      ...rect,  
      completedQuantity: rect.completedQuantity,  
      breakageQuantity: rect.breakageQuantity,  
      thisProcess: rect.thisProcess,  
    }));  
    console.log(adjustedRects.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'  
    },  
    legend: {  
      orient: 'vertical',  
      left: 'left',  
    },  
    series: [  
      {  
        name: '饼状图',  
        type: 'pie',  
        radius: ['50%','70%'],  
        data: [  
          {value: rect.completedQuantity, name: '加工数量'},  
          {value: rect.breakageQuantity, name: '次破数量'},  
        console.log(rect.breakageQuantity)
        ], 
        emphasis: {  
          itemStyle: {  
            shadowBlur: 10,  
            shadowOffsetX: 0,  
            shadowColor:  'rgba(0, 0, 0, 0.5)'  
          }  
        }  
      }  
    ]  
  };  
    chart.setOption(option);  
    chartRefs.value[index] = { ...chartRefs.value[index], chart };  

}  
console.log(chartRefs.value[index]);
}  
  
// 更新图表  
// 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();  
});  

onMounted(() => {
  // fetchFlowCardId();
  // fetchTableData(); // 获取数据
@@ -172,8 +290,6 @@
  console.log("关闭了")
  closeWebSocket();
});


</script>  
  
<style scoped>