| | |
| | | </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" |
| | |
| | | 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); |
| | |
| | | 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 => ({ |
| | |
| | | </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> |