From 4e3b8155722b66e25df3c6fd42cc586b68dea391 Mon Sep 17 00:00:00 2001
From: zhoushihao <zsh19950802@163.com>
Date: 星期五, 06 六月 2025 13:55:39 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'

---
 UI-Project/src/views/largescreendisplay/screendisplay.vue |  399 +++++++++++++++++++++++++++++++++++---------------------
 1 files changed, 246 insertions(+), 153 deletions(-)

diff --git a/UI-Project/src/views/largescreendisplay/screendisplay.vue b/UI-Project/src/views/largescreendisplay/screendisplay.vue
index eeb630a..7e0b84e 100644
--- a/UI-Project/src/views/largescreendisplay/screendisplay.vue
+++ b/UI-Project/src/views/largescreendisplay/screendisplay.vue
@@ -38,21 +38,23 @@
 let myChartHollow = null;
 const socketUrl1 = `ws://${WebSocketHost}:${host}/api/cacheGlass/api/talk/largenScreen`;
 const handleMessage1 = (data) => {
-  edgOneTasks.value = data.edgOneTasks[0];
-  edgTwoTasks.value = data.edgTwoTasks[0];
+  edgOneTasks.value = data.edgOneCount[0];
+  edgTwoTasks.value = data.edgOneCount[0];
   engineeringOne.value = data.engineeringOne[0];
   engineeringTwo.value = data.engineeringTwo[0];
-  if (numBoxes.value != edgOneTasks.value.length) {
-    numBoxes.value = edgOneTasks.value.length;
+  if (numBoxes.value != edgOneTasks.value) {
+    numBoxes.value = edgOneTasks.value;
     initBoxes(boxes, numBoxes, 'firstup');
 
   }
-  if (numBoxes2.value != edgTwoTasks.value.length) {
-    numBoxes2.value = edgTwoTasks.value.length;
+  if (numBoxes2.value != edgTwoTasks.value) {
+    numBoxes2.value = edgTwoTasks.value;
     initBoxes(boxes2, numBoxes2, 'firstup');
   }
-  timeAxisCreate("鍒囧壊褰撳ぉ杩愯鎯呭喌", chartLoad.value, myChartLoad, data.loadRunTimes[0]);
-  timeAxisCreate("纾ㄨ竟褰撳ぉ杩愯鎯呭喌", chartEdg.value, myChartEdg, data.loadRunTimes[0]);
+  timeAxisCreate(t('large.cuttingState'), chartLoad.value, myChartLoad, tableDataTime(false, data.loadRunTimes[0]));
+  timeAxisCreate(t('large.edgingState'), chartEdg.value, myChartEdg, tableDataTime(false, data.loadRunTimes[0]));
+
+
 };
 let socket2 = null;
 const temperingTaskType = ref([])
@@ -87,7 +89,7 @@
 const socketUrl3 = `ws://${WebSocketHost}:${host}/api/cacheVerticalGlass/api/talk/largenScreen`;
 const handleMessage3 = (data) => {
   bigStorageCageUsage.value = data.bigStorageCageUsage[0];
-  timeAxisCreate("閽㈠寲褰撳ぉ杩愯鎯呭喌", chartTemp.value, myChartTemp, data.tempRunTimes[0]);
+  timeAxisCreate(t('large.temperingState'), chartTemp.value, myChartTemp, tableDataTime(false, data.tempRunTimes[0]));
 };
 // let mychart = null; // 寤鸿璁句负澶栭儴鍙橀噺閬垮厤閲嶅鍒濆鍖�
 
@@ -99,6 +101,34 @@
   const seconds = date.getSeconds().toString().padStart(2, '0');
   return `${hours}:${minutes}:${seconds}`;
 }
+
+const tableDataTime = (result, tableDatax) => {
+  const tableData = [];
+  if (tableDatax.length > 0) {
+    tableDatax.forEach((item, index) => {
+      tableData.push({
+        firstTimestamp: index == 0 ? item.startTimestamp : tableDatax[index - 1].secondTimestamp,
+        secondTimestamp: index == tableDatax.length - 1 ? item.endTimestamp : item.firstTimestamp,
+        diffMinutes: item.diffMinutes,
+        startTimestamp: item.startTimestamp,
+        endTimestamp: item.endTimestamp,
+        state: 1
+      });
+      if (result) {
+        tableData.push({
+          firstTimestamp: item.firstTimestamp,
+          secondTimestamp: item.secondTimestamp,
+          diffMinutes: item.diffMinutes,
+          startTimestamp: item.startTimestamp,
+          endTimestamp: item.endTimestamp,
+          state: 2
+        });
+      }
+    });
+  }
+
+  return tableData;
+};
 
 const timeAxisCreate = (title, chartDom, mychart, RunTimes) => {
   if (!chartDom) {
@@ -119,24 +149,25 @@
     secondTime = RunTimes[0].endTimestamp;
   }
 
-  let datas = ref([])
-  RunTimes.forEach((item, index) => {
-    // if (index % 2 === 0) {
-    datas.value.push([item.firstTimestamp, -1, formatToTimeString(item.firstTimestamp)])
-    datas.value.push([item.secondTimestamp, 1, formatToTimeString(item.secondTimestamp)])
-    // } else {
-    //   datas.value.push([item.firstTimestamp, -1, item.diffMinutes])
-    //   datas.value.push([item.firstTimestamp, -1, item.diffMinutes])
-    // }
-  })
-  // console.log(D)
   // 鏋勫缓绾挎鏁扮粍
   const segments = RunTimes.map(item => ({
     type: 'line',
     symbol: 'none',
     data: [
-      [item.firstTimestamp, 0],
-      [item.secondTimestamp, 0]
+      {
+        value: [item.firstTimestamp, 0],
+        extra: {
+          start: item.firstTimestamp,
+          end: item.secondTimestamp
+        }
+      },
+      {
+        value: [item.secondTimestamp, 0],
+        extra: {
+          start: item.firstTimestamp,
+          end: item.secondTimestamp
+        }
+      }
     ],
     lineStyle: {
       color: 'red', // 鏀寔涓嶅悓棰滆壊
@@ -144,6 +175,7 @@
     },
     z: 1
   }));
+
 
   const optionOne = {
     title: {
@@ -160,7 +192,28 @@
       trigger: 'axis',
       axisPointer: { type: 'line' },
       backgroundColor: 'rgba(50,50,50,0.7)',
-      textStyle: { color: '#fff' }
+      textStyle: { color: '#fff' },
+      formatter: (params) => {
+        const seen = new Set();
+        const items = params
+          .filter(p => {
+            const key = p.data?.extra?.start + '|' + p.data?.extra?.end;
+            if (seen.has(key)) return false;
+            seen.add(key);
+            return true;
+          })
+          .map(p => {
+            const start = p.data?.extra?.start;
+            const end = p.data?.extra?.end;
+            const timeStr = p.axisValueLabel;
+            if (start && end) {
+              return `寮�濮嬫椂闂达細${start}<br/>缁撴潫鏃堕棿锛�${end}`;
+            }
+            return `鏃堕棿锛�${timeStr}`;
+          })
+          .filter(Boolean);
+        return items.join('<br/>');
+      }
     },
     grid: {
       top: '20%',
@@ -202,8 +255,8 @@
         ],
         lineStyle: {
           color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-            { offset: 0, color: '#4facfe' },
-            { offset: 1, color: '#00f2fe' }
+            { offset: 0, color: 'red' },
+            { offset: 1, color: 'red' }
           ]),
           width: 5,
           shadowColor: 'rgba(0,0,0,0.2)',
@@ -215,87 +268,16 @@
       ...segments.map(seg => ({
         ...seg,
         lineStyle: {
-          color: '#ffcc00',
+          color: '#4facfe',
           width: 3,
           shadowColor: 'rgba(255,204,0,0.5)',
           shadowBlur: 5
         }
       })),
-      // 鍗$墖浜嬩欢锛堜紭鍖栨牱寮忥級
-      {
-        type: 'custom',
-        renderItem: function (params, api) {
-          const x = api.coord([api.value(0), api.value(1)])[0];
-          const yBase = api.coord([api.value(0), 0])[1];
-          const yOffset = api.value(1) > 0 ? -70 : 30;
-          const cardWidth = 40;
-          const cardHeight = 22;
-          const cardX = x;
-          const cardY = yBase + yOffset;
-          const text = api.value(2);
-
-          return {
-            type: 'group',
-            children: [
-              {
-                type: 'line',
-                shape: {
-                  x1: x,
-                  y1: yBase,
-                  x2: x,
-                  y2: cardY + (api.value(1) > 0 ? cardHeight : 0)
-                },
-                style: {
-                  stroke: '#888',
-                  lineWidth: 1.5,
-                  lineDash: [4, 2]
-                }
-              },
-              {
-                type: 'rect',
-                shape: {
-                  x: cardX - cardWidth / 2,
-                  y: cardY,
-                  width: cardWidth,
-                  height: cardHeight,
-                  r: 6 // 鍦嗚
-                },
-                style: {
-                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    { offset: 0, color: '#ffffff' },
-                    { offset: 1, color: '#e0f7fa' }
-                  ]),
-                  stroke: '#00acc1',
-                  lineWidth: 1,
-                  shadowColor: '#ccc',
-                  shadowBlur: 6
-                }
-              },
-              {
-                type: 'text',
-                style: {
-                  text: text,
-                  x: cardX,
-                  y: cardY + cardHeight / 2,
-                  textAlign: 'center',
-                  textVerticalAlign: 'middle',
-                  font: '12px sans-serif',
-                  fill: '#006064'
-                }
-              }
-            ]
-          };
-        },
-        encode: {
-          x: 0
-        },
-        data: datas.value,
-        z: 10
-      }
     ]
   };
 
-  mychart.setOption(optionOne);
+  mychart.setOption(optionOne, true);
 };
 
 let socket4 = null;
@@ -303,16 +285,16 @@
 const socketUrl4 = `ws://${WebSocketHost}:${host}/api/hollowGlass/api/talk/largenScreen`;
 const handleMessage4 = (data) => {
   hollowBigStorageCageUsage.value = data.hollowBigStorageCageUsage[0];
-  timeAxisCreate("涓┖褰撳ぉ杩愯鎯呭喌", chartHollow.value, myChartHollow, data.hollowRunTimes[0]);
+  timeAxisCreate(t('large.hollowState'), chartHollow.value, myChartHollow, tableDataTime(false, data.hollowRunTimes[0]));
 };
 let socket5 = null;
 let myChart = null;
 let myChart2 = null;
+const switchNoorAreaLeft = ref(true)
+const switchNoorAreaRight = ref(true)
 const productionVO = ref([])
 const socketUrl5 = `ws://${WebSocketHost}:${host}/api/cacheGlass/api/talk/largenScreenProduction`;
-const handleMessage5 = (data) => {
-  productionVO.value = data.productionVO[0];
-  // 灏嗗師濮嬫暟鎹浆鎹负 ECharts 鍥捐〃鎵�闇�鏍煎紡
+const createchart = (productionVO) => {
   categories = productionVO.value.map(item => item.date); // 鑾峰彇鏃ユ湡浣滀负 x 杞�
   totalAreaOutOne = productionVO.value.map(item => item.totalAreaOutOne);
   countIn = productionVO.value.map(item => item.countIn);
@@ -333,13 +315,23 @@
     console.error('鍥捐〃瀹瑰櫒鏈壘鍒�');
     return;
   }
-  // myChart = echarts.init(chartDom);
   if (!myChart) {
     myChart = echarts.init(chartDom);
   }
-  // else {
-  //     myChart.clear();
-  //   }
+  let loadOneData;
+  let loadTwoData;
+  let tempfontData;
+  if (switchNoorAreaLeft.value) {
+    loadOneData = countOutOne;
+    loadTwoData = countOutTwo;
+    tempfontData = countIn;
+  } else {
+    loadOneData = totalAreaOutOne;
+    loadTwoData = totalAreaOutTwo;
+    tempfontData = totalAreaIn;
+  }
+
+
 
 
   const option = {
@@ -348,32 +340,53 @@
     legend: {
       data: [
         t('large.countOutOne'),
-        t('large.totalAreaOutOne'),
+        // t('large.totalAreaOutOne'),
         t('large.countOutTwo'),
-        t('large.totalAreaOutTwo'),
+        // t('large.totalAreaOutTwo'),
         t('large.countIn'),
-        t('large.totalAreaIn')
+        // t('large.totalAreaIn')
       ]
     },
-    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
-    toolbox: { feature: { saveAsImage: {} } },
+    grid: { top: '20%', left: '3%', right: '4%', bottom: '3%', containLabel: true },
+    toolbox: {
+      feature: {
+        saveAsImage: {},
+        myTool1: {
+          show: true,
+          title: t('large.switch'),
+          icon: 'path://M512 0C229.234 0 0 229.234 0 512s229.234 512 512 512 512-229.234 512-512S794.766 0 512 0z m0 960C264.602 960 64 759.398 64 512S264.602 64 512 64s448 200.602 448 448-200.602 448-448 448z m0-768c-176.448 0-320 143.552-320 320s143.552 320 320 320 320-143.552 320-320-143.552-320-320-320z', // 鍦嗗舰鎸夐挳鍥炬爣锛堝彲鎹級
+          onclick: function () {
+            switchNoorAreaLeft.value = !switchNoorAreaLeft.value;
+            createchart(productionVO);
+            // customButtonClick(); // 璋冪敤浣犺嚜瀹氫箟鐨勬柟娉�
+          }
+        }
+      }
+    },
     xAxis: {
       type: 'category',
-      boundaryGap: false,
+      boundaryGap: true,
       data: categories // 杩欐槸鏃ユ湡鏁版嵁
     },
-    yAxis: { type: 'value' },
+    yAxis: {
+      type: 'value',
+      name: switchNoorAreaLeft.value==true?t('large.quantity'):t('large.are'), // 鍧愭爣杞村悕绉�
+      axisLabel: {
+        formatter: '{value}'
+      }
+    },
     series: [
-      { name: t('large.countOutOne'), type: 'bar', data: countOutOne },
-      { name: t('large.totalAreaOutOne'), type: 'bar', data: totalAreaOutOne },
-      { name: t('large.countOutTwo'), type: 'bar', data: countOutTwo },
-      { name: t('large.totalAreaOutTwo'), type: 'bar', data: totalAreaOutTwo },
-      { name: t('large.countIn'), type: 'bar', data: countIn },
-      { name: t('large.totalAreaIn'), type: 'bar', data: totalAreaIn }
+      { name: t('large.countOutOne'), type: 'bar', data: loadOneData },
+      // { name: t('large.totalAreaOutOne'), type: 'bar', data: totalAreaOutOne },
+      { name: t('large.countOutTwo'), type: 'bar', data: loadTwoData },
+      // { name: t('large.totalAreaOutTwo'), type: 'bar', data: totalAreaOutTwo },
+      { name: t('large.countIn'), type: 'bar', data: tempfontData },
+      // { name: t('large.totalAreaIn'), type: 'bar', data: totalAreaIn }
     ]
   };
 
-  myChart.setOption(option);
+  myChart.setOption(option, true);
+
 
   const chartDom2 = chartRef2.value;
   if (!chartDom2) {
@@ -387,38 +400,74 @@
   // else {
   //     myChart2.clear();
   //   }
+  let tempData;
+  let hollowOneData;
+  let hollowTwoData;
+  if (switchNoorAreaRight.value) {
+    tempData = countOut;
+    hollowOneData = hollowCountOutOne;
+    hollowTwoData = hollowCountOutTwo;
+  } else {
+    tempData = totalAreaOut;
+    hollowOneData = hollowTotalAreaOutOne;
+    hollowTwoData = hollowTotalAreaOutTwo;
+  }
   const option2 = {
     title: { text: '' },
     tooltip: { trigger: 'axis' },
     legend: {
       data: [
-        t('large.totalAreaOut'),
         t('large.countOut'),
-        t('large.hollowTotalAreaOutOne'),
+        // t('large.totalAreaOut'),
         t('large.hollowCountOutOne'),
+        // t('large.hollowTotalAreaOutOne'),
         t('large.hollowCountOutTwo'),
-        t('large.hollowTotalAreaOutTwo')
+        // t('large.hollowTotalAreaOutTwo')
       ]
     },
     grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
-    toolbox: { feature: { saveAsImage: {} } },
+    toolbox: {
+      feature: {
+        saveAsImage: {},
+        myTool1: {
+          show: true,
+          title: t('large.switch'),
+          icon: 'path://M512 0C229.234 0 0 229.234 0 512s229.234 512 512 512 512-229.234 512-512S794.766 0 512 0z m0 960C264.602 960 64 759.398 64 512S264.602 64 512 64s448 200.602 448 448-200.602 448-448 448z m0-768c-176.448 0-320 143.552-320 320s143.552 320 320 320 320-143.552 320-320-143.552-320-320-320z', // 鍦嗗舰鎸夐挳鍥炬爣锛堝彲鎹級
+          onclick: function () {
+            switchNoorAreaRight.value = !switchNoorAreaRight.value;
+            createchart(productionVO);
+            // customButtonClick(); // 璋冪敤浣犺嚜瀹氫箟鐨勬柟娉�
+          }
+        }
+      }
+    },
     xAxis: {
       type: 'category',
-      boundaryGap: false,
+      boundaryGap: true,
       data: categories // 杩欐槸鏃ユ湡鏁版嵁
     },
-    yAxis: { type: 'value' },
+    yAxis: {
+      type: 'value',
+      name: switchNoorAreaRight.value==true?t('large.quantity'):t('large.are'), // 鍧愭爣杞村悕绉�
+      axisLabel: {
+        formatter: '{value}'
+      }
+    },
     series: [
-      { name: t('large.totalAreaOut'), type: 'bar', data: totalAreaOut },
-      { name: t('large.countOut'), type: 'bar', data: countOut },
-      { name: t('large.hollowTotalAreaOutOne'), type: 'bar', data: hollowTotalAreaOutOne },
-      { name: t('large.hollowCountOutOne'), type: 'bar', data: hollowCountOutOne },
-      { name: t('large.hollowCountOutTwo'), type: 'bar', data: hollowCountOutTwo },
-      { name: t('large.hollowTotalAreaOutTwo'), type: 'bar', data: hollowTotalAreaOutTwo }
+      // { name: t('large.totalAreaOut'), type: 'bar', data: tempData },
+      { name: t('large.countOut'), type: 'bar', data: tempData },
+      // { name: t('large.hollowTotalAreaOutOne'), type: 'bar', data: hollowOneData },
+      { name: t('large.hollowCountOutOne'), type: 'bar', data: hollowOneData },
+      // { name: t('large.hollowTotalAreaOutTwo'), type: 'bar', data: hollowTwoData },
+      { name: t('large.hollowCountOutTwo'), type: 'bar', data: hollowTwoData }
     ]
   };
 
-  myChart2.setOption(option2);
+  myChart2.setOption(option2, true);
+}
+const handleMessage5 = (data) => {
+  productionVO.value = data.productionVO[0];
+  createchart(productionVO);
 };
 // 灏嗗師濮嬫暟鎹浆鎹负 ECharts 鍥捐〃鎵�闇�鏍煎紡
 let categories = ref([]); // 鑾峰彇鏃ユ湡浣滀负 x 杞�
@@ -453,14 +502,7 @@
 
 const exportToExcel = async () => {
   try {
-    window.open('http://192.168.0.39:10011/largenScreen/exportDailyProduction', '_blank');
-    // const response = await request.get('/cacheGlass/largenScreen/exportDailyProduction');
-    // if (response.code == 200) {
-    //   ElMessage.success(response.message);
-    //   tableDatad.value = response.data;
-    // } else {
-    //   ElMessage.error(response.message);
-    // }
+    window.open(`http://${WebSocketHost}:10011/largenScreen/exportDailyProduction`, '_blank');
   }
   catch (error) {
     console.error(error);
@@ -522,6 +564,28 @@
 const chartTemp = ref(null)
 const chartHollow = ref(null)
 
+const cleanupWebSocketData = (completeCleanup) => {
+  if (completeCleanup) {
+    // 瀹屽叏娓呯悊
+    rawGlassStorageDetailList.value = [];
+    orderDTOS.value = [];
+    // ...鍏朵粬鏁扮粍
+  } else {
+    // 閮ㄥ垎娓呯悊 - 淇濈暀鏈�杩戞暟鎹�
+    const MAX_ITEMS = 50;
+    rawGlassStorageDetailList.value = rawGlassStorageDetailList.value.slice(-MAX_ITEMS);
+    orderDTOS.value = orderDTOS.value.slice(-MAX_ITEMS);
+    // ...鍏朵粬鏁扮粍
+  }
+
+  // 娓呯悊鍥捐〃
+  [myChart, myChart2, myChartLoad, myChartEdg, myChartTemp, myChartHollow].forEach(chart => {
+    if (chart) {
+      chart.clear();
+      // 濡傛灉闇�瑕侊紝鍙互閲嶆柊鍒濆鍖栧浘琛�
+    }
+  });
+};
 
 // 鍦ㄧ粍浠舵寕杞芥椂璁剧疆榛樿鏃堕棿鑼冨洿
 onMounted(async () => {
@@ -541,6 +605,21 @@
   // 璁剧疆鏃堕棿鑼冨洿涓� [寮�濮嬫椂闂�, 缁撴潫鏃堕棿]
   // timeRange.value = [startTime.format('YYYY-MM-DD HH:mm:ss'), endTime.format('YYYY-MM-DD HH:mm:ss')];
 
+  const cleanupInterval = setInterval(() => {
+    cleanupWebSocketData(true); // 瀹屽叏娓呯悊
+  }, 300000);
+
+  // 姣忔鏀跺埌娑堟伅鏃舵鏌ユ暟鎹噺
+  const originalHandleMessage = handleMessage;
+  handleMessage = (data) => {
+    originalHandleMessage(data);
+    cleanupWebSocketData(false); // 閮ㄥ垎娓呯悊
+  };
+
+  onUnmounted(() => {
+    clearInterval(cleanupInterval);
+    cleanupWebSocketData(true); // 缁勪欢鍗歌浇鏃跺畬鍏ㄦ竻鐞�
+  });
 });
 // onMounted(() => {
 //   socket = initializeWebSocket(socketUrl, handleMessage);
@@ -656,11 +735,11 @@
   if (box.frameCount % 2 === 0 && box.el) {
     box.el.style.top = `${box.y}px`;
     if (box.x > 0) {
-      
-      if(box.direction=="right"){
+
+      if (box.direction == "right") {
         box.el.style.right = `-${box.x}px`;
-        
-      }else{
+
+      } else {
         box.el.style.right = `${box.x}px`;
       }
       box.el.style.left = '';
@@ -819,6 +898,17 @@
   iframe11.value = true;
   iframeUrl11.value = `${window.location.origin}/#/largescreendisplay/productionstatistics`;
 };
+
+const iframeUrl12 = ref('');
+const iframe12 = ref(false);
+const handlehistorical12 = (key) => {
+  iframe12.value = true;
+  const params = new URLSearchParams({
+    key: key,
+  });
+  iframeUrl12.value = `${window.location.origin}/#/largescreendisplay/timeaxis?${params.toString()}`;
+};
+
 const transposedData = computed(() => {
   const keys = Object.keys(fieldNames); // 鎸� fieldNames 鐨勯『搴�
   return keys.map(key => {
@@ -887,25 +977,29 @@
         frameborder="0"></iframe>
     </el-dialog>
     <el-dialog v-model="iframe10" top="5vh" width="95%" @close="iframeUrl10 = ''">
-      <iframe :src="iframeUrl10" marginwidth="2000px" marginheight="2000px" width="100%" height="750px"
+      <iframe :src="iframeUrl10" marginwidth="2000px" marginheight="2000px" width="100%" height="700px"
         frameborder="0"></iframe>
     </el-dialog>
     <el-dialog v-model="iframe11" top="5vh" width="95%" @close="iframeUrl11 = ''">
       <iframe :src="iframeUrl11" marginwidth="2000px" marginheight="2000px" width="100%" height="750px"
         frameborder="0"></iframe>
     </el-dialog>
-
+    <el-dialog v-model="iframe12" top="5vh" width="95%" @close="iframeUrl12 = ''">
+      <iframe :src="iframeUrl12" marginwidth="2000px" marginheight="2000px" width="100%" height="750px"
+        frameborder="0"></iframe>
+    </el-dialog>
     <div class="awatch" style="display: flex;">
       <!-- 鐢熶骇缁熻 -->
       <div style="height: 100px;width: 25%;float: right;">
         <div id="ss" style="width: 100%; display: flex; justify-content: center;">
-          <div ref="chartRef" style="width: 600px; height: 400px;" @dblclick="handlehistorical10()"></div>
+          <div ref="chartRef" style="width: 600px; height: 400px;" @dblclick="handlehistorical10()">
+          </div>
         </div>
         <div style="width: 100%;height: 245px;display: flex;">
-          <div ref="chartLoad" style="width: 100%;"></div>
+          <div ref="chartLoad" style="width: 100%;" @dblclick="handlehistorical12(1)"></div>
         </div>
         <div style="width: 100%;height: 245px;display: flex;">
-          <div ref="chartEdg" style="width: 100%;"></div>
+          <div ref="chartEdg" style="width: 100%;" @dblclick="handlehistorical12(2)"></div>
         </div>
       </div>
       <div style="width: 50%;">
@@ -1078,16 +1172,15 @@
           </el-table>
         </div>
       </div>
-
       <div style="height: 100px;width: 25%;float: right;">
         <div id="ss" style="width: 100%; display: flex; justify-content: center;">
           <div ref="chartRef2" style="width: 600px; height: 400px;" @dblclick="handlehistorical10()"></div>
         </div>
         <div style="width: 100%;height: 245px;display: flex;">
-          <div ref="chartTemp" style="width: 100%;"></div>
+          <div ref="chartTemp" style="width: 100%;" @dblclick="handlehistorical12(3)"></div>
         </div>
         <div style="width: 100%;height: 245px;display: flex;">
-          <div ref="chartHollow" style="width: 100%;"></div>
+          <div ref="chartHollow" style="width: 100%;" @dblclick="handlehistorical12(4)"></div>
         </div>
       </div>
     </div>

--
Gitblit v1.8.0