wangfei
2024-08-06 dd86b5a89faff35cb3d74f3c47bdf65db63aa62d
UI-Project/src/views/largescreen/largescreen.vue
@@ -25,8 +25,12 @@
      </el-table-column>
      </el-table>
</div> 
<div id="center" style="margin-top: 10px;margin-left: 10px; height: 240px;width: 750px;">
<div id="parent" style="margin-top: 10px;margin-left: 10px; height: 240px;width: 750px;">
  <img src="../../assets/d1a.png" alt="" style="margin-left: -10px; width: 100%;height: 100%;position: relative;"> 
  <div id="overlay" v-show="flake"></div>
  <div id="overlayb" v-show="flakeb"></div>
  <div id="overlayc" v-show="flakec"></div>
  <div id="overlayd" v-show="flaked"></div>
</div>
<div id="centerright" style="margin-top: 10px;margin-left: 10px; height: 240px;width: 240px;background-color: #911005;">
  <el-table height="240" ref="table" width="340px"
@@ -116,6 +120,10 @@
const tableDatac = ref([])
const adjustedRects = ref([]);  
const chartRefs = ref([]);  
const flake = ref(true)
const flakeb = ref(true)
const flakec = ref(true)
const flaked = ref(true)
const thisProcess = ref(); // 用于存储process_id的响应式引用 
// 定义一个响应式引用来存储图表实例    
const chartDom = ref(null);  
@@ -169,8 +177,11 @@
  chartRefs.value[index].dom = el;  
}  
const socketUrl2 = `ws://${WebSocketHost}:${host}/api/temperingGlass/api/talk/temperingIsRun`;
onMounted(() => {  
socket = new WebSocket(socketUrl);  
socket = new WebSocket(socketUrl2);
socket.onmessage = (event) => {  
  const data = JSON.parse(event.data);  
  processesData.value = data.device[0].map(rect => ({  
@@ -248,23 +259,59 @@
</script>  
<style scoped>  
.echarts-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.echarts-item {
width: 150px;
height: 150px;
margin: 20px;
}
.pie-chart {
width: 100%;
height: 100%;
}
#parent{
  position: relative;
  width: 1500px;
  margin-left: -300px
}
#overlay{
  position: absolute;
  z-index: 1;
  width: 30px;
  height: 10px;
  background-color: #529b2e;
  margin-top: -39px;
  margin-left: 4px;
}
#overlayb{
  position: absolute;
  z-index: 1;
  width: 16px;
  height: 115px;
  background-color: #529b2e;
  margin-top: -197px;
  margin-left: 9px;
}
#overlayc{
  position: absolute;
  z-index: 1;
  width: 16px;
  height: 16px;
  background-color: #529b2e;
  margin-top: -238px;
  margin-left: 9px;
}
#overlayd{
  position: absolute;
  z-index: 1;
  width: 28px;
  height: 11px;
  background-color: #529b2e;
  margin-top: -234px;
  margin-left: 56px;
}
</style>