尝试修复软件长时间运行后3D饼图消失的bug

src/main/app.ts

@@ -1,4 +1,4 @@
-import { ipcMain, app, screen, globalShortcut, BrowserWindow, dialog } from 'electron'
+import { ipcMain, app, screen, globalShortcut, BrowserWindow, dialog, crashReporter } from 'electron'
 import { join } from "path";
 const config = require('./config')
 import './load-serialport'
@@ -6,6 +6,7 @@ import { keyword } from './KeyWord'
 
 const child_process = require('child_process')
 const crypto = require('crypto')
+const fs = require('fs')
 
 function queryPass(passPath: string, passValue: string) {
   return new Promise(function (resolve, reject) {
@@ -67,6 +68,23 @@ async function checkLaunchEnv() {
   }
 }
 
+// 记录崩溃信息
+function recordCrash() { 
+  return new Promise<void>(resolve => { 
+     // 崩溃日志请求成功.... 
+    resolve();
+  })
+}
+
+function abnormalLog(txtName: string, txtLog: string) {
+  fs.writeFile(txtName, txtLog, (ero:any) => {
+    if(ero){
+        console.log(`创建失败：${ero}`);
+    }
+    console.log(`创建成功！`);
+  });
+}
+
 var windows:Array<BrowserWindow> = [];
 
 function createWindow(page: string, display: any) {
@@ -77,7 +95,8 @@ function createWindow(page: string, display: any) {
     y: display.bounds.y,
     webPreferences: {
       nodeIntegration: true,
-      preload: join(__dirname, 'preload.js')
+      preload: join(__dirname, 'preload.js'),
+      webgl: true
     }
   })
 
@@ -90,6 +109,45 @@ function createWindow(page: string, display: any) {
     }
   })
 
+  ipcMain.on("webglcontextlost", (event) => {
+    abnormalLog(`./resources/webglcontextlost${new Date().getTime()}.txt`, `webglcontextlost: ${new Date()}`);
+  })
+
+  ipcMain.on("refresh", (event) => {
+    abnormalLog(`./resources/refresh${new Date().getTime()}.txt`, `refresh: ${new Date()}`);
+  })
+
+  // 监听到软件奔溃时执行
+  win.webContents.on('crashed', () => {
+    console.log('crash');
+    // const options = dialog.showMessageBox({
+    //    type: 'error',
+    //    title: '进程崩溃了',
+    //    message: '这个进程已经崩溃.',
+    //    buttons: ['重载', '退出'],
+    //  });    
+    recordCrash().then(() => {
+      abnormalLog(`./resources/crash${new Date().getTime()}.txt`, `crash: ${new Date()}`);
+      // options.then((index) => {
+      //   if (index.response === 0) {
+      //     if (win.isDestroyed()) {
+      //       app.relaunch();
+      //       app.exit(0);
+      //     } else {
+      //       BrowserWindow.getAllWindows().forEach((w) => {
+      //         if (w.id !== win.id) w.destroy();
+      //       });
+      //       win.reload();
+      //     }
+      //   }
+      //   else app.quit();
+      //  });
+     }).catch((e) => {
+       console.log('err', e);
+       abnormalLog(`./resources/crash${new Date().getTime()}.txt`, `crash: ${new Date()}, err: ${e}`);
+     });
+  })
+
   if (process.env.NODE_ENV === 'development') {
     win.loadURL(`http://localhost:3000/${page}.html`)
     win.webContents.openDevTools()
@@ -165,12 +223,25 @@ async function main() {
   // 异步代码执行完毕后执行的代码
   if (checkReault) {
     launch()
+    // 模拟软件崩溃
+    // setTimeout(() => {
+    //   process.crash();
+    // }, 10000);
   } else {
     dialog.showErrorBox('系统提示', '软件启动出错，请联系售后技术支持人员')
     process.exit(1)
   }
 }
 
+crashReporter.start({uploadToServer: false})
+
+app.commandLine.appendSwitch('ignore-gpu-blacklist')
+
+app.disableDomainBlockingFor3DAPIs()
+
+// 禁用GPU加速，此模式下何时刷新canvas不能通过判断webgl上下文丢失实现
+// app.disableHardwareAcceleration()
+
 app.whenReady().then(main)
 
 app.on('window-all-closed', () => {

src/render/components/Ring.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-chart v-if="refresh" ref="ring" :option="option" />
+  <v-chart id="vchart" v-if="refresh" ref="ring" :option="option" />
 </template>
 
 <script lang="ts" setup>
@@ -17,9 +17,10 @@ use([CanvasRenderer, LegendComponent, PieChart]);
 const emit = defineEmits(['changeColor']);
 
 const ring = ref(null);
-const nowtime = ref(new Date().getTime());
 const refresh = ref(true);
 
+var vchart, canvas, gl;
+
 // 生成环形的曲面参数方程，用于 series-surface.parametricEquation
 const getParametricEquation = (
   startRatio,
@@ -30,11 +31,6 @@ const getParametricEquation = (
   height,
   size
 ) => {
-  if(new Date().getTime() > nowtime.value){
-    refresh.value = false;
-    // console.log(new Date()+' getParametricEquation Log: '+startRatio+', '+endRatio+', '+isSelected+', '+isHovered+', '+k+', '+height+', '+size);
-    nowtime.value = new Date().getTime() + 600000;
-  }
   // 计算
   let midRatio = (startRatio + endRatio) / 2;
 
@@ -99,7 +95,7 @@ const getParametricEquation = (
         return Math.sin(u);
       }
       if (u > Math.PI * 2.5) {
-        return Math.sin(u);
+        return Math.sin(u) * height * .1;
       }
       return Math.sin(v) > 0 ? 1 * height : -1;
     },
@@ -289,9 +285,6 @@ const option = reactive({
 });
 
 const getPie3D = (sumValue, pieValue, internalDiameterRatio, height, size) => {
-  // if(new Date().getTime() > nowtime.value){
-  //   console.log(new Date()+' getPie3D Log: '+sumValue+', '+pieValue+', '+internalDiameterRatio+', '+height+', '+size);
-  // }
   let startValue = 0;
   let endValue = 0;
   // internalDiameterRatio（0~1之间的浮点数）：内径/外径的值（默认值 1/2）
@@ -350,15 +343,41 @@ const highlight = () => {
   }
 };
 
+// 当webgl丢失上下文导致3D饼图消失时刷新canvas，只能在GPU渲染模式下使用
+const reload = () => {
+  vchart = document.getElementById("vchart");
+  canvas = vchart.children[0].children[0].children[0];
+  //通过方法getContext()获取webgl上下文
+  gl = canvas.getContext("webgl");
+  // 监听webgl丢失上下文事件
+  canvas.addEventListener("webglcontextlost",function (e) {
+    // console.log(e);
+    ipcRenderer.send("webglcontextlost");
+    e.preventDefault();
+    refresh.value = false;
+    setTimeout(() => {
+      refresh.value = true;
+      // console.log('refresh');
+      ipcRenderer.send("refresh");
+      setTimeout(() => {
+        // 刷新canvas后重新获取webgl上下文
+        reload();
+      }, 400);
+    }, 400);
+  },false,);
+
+  // 用于模拟webgl丢失上下文
+  // setTimeout(() => {
+  //   gl.getExtension("WEBGL_lose_context").loseContext();
+  // }, 2000);
+}
+
 onMounted(() => {
   setInterval(highlight, 2500);
+  reload();
 });
 
 const update = (bd_val: number, gp_val: number, gl_val: number, ga_val: number) => {
-  if(!refresh.value){
-    // console.log('refresh');
-    refresh.value = true;
-  }
   option.series[0].pieData.value = bd_val;
   option.series[1].pieData.value = gp_val;
   option.series[2].pieData.value = gl_val;