update code

package.json

@@ -59,6 +59,7 @@
     "js-md5": "^0.8.3",
     "json-editor-vue3": "^1.1.1",
     "lodash-es": "^4.17.21",
+    "mitt": "^3.0.1",
     "net": "^1.0.2",
     "nprogress": "^0.2.0",
     "path-browserify": "^1.0.1",

src/App.vue

@@ -168,5 +168,14 @@ html.dark {
       }
     }
   }
+  .jv-container.jv-light{
+    background: #263445;
+  }
+  .add-report .row-norm .el-form-item__content{
+    background: #263445;
+  }
+  .add-report .div-nav-header{
+    color:#fff;
+  }
 }
 </style>

src/layout/components/NavBar/components/NavbarRight.vue

@@ -54,6 +54,7 @@ import defaultSettings from "@/settings";
 import UserAPI from "@/api/myUser";
 import { DeviceEnum } from "@/enums/DeviceEnum";
 import { ThemeEnum } from "@/enums/ThemeEnum";
+
 const appStore = useAppStore();
 const tagsViewStore = useTagsViewStore();
 // Stores

src/store/modules/settings.ts

@@ -1,7 +1,7 @@
 import defaultSettings from "@/settings";
 import { ThemeEnum } from "@/enums/ThemeEnum";
 import Color from "color";
-
+import eventBus from '@/utils/eventBus.js'
 type SettingsValue = boolean | string;
 
 export const useSettingsStore = defineStore("setting", () => {
@@ -89,6 +89,7 @@ export const useSettingsStore = defineStore("setting", () => {
    */
   function changeTheme(val: string) {
     theme.value = val;
+    eventBus.emit("changeTheme",val)
   }
 
   /**

src/utils/eventBus.js

@@ -0,0 +1,4 @@
+// eventBus.js
+import mitt from 'mitt';
+const bus = mitt();
+export default bus;

src/views/simulationEvaluation/reportDesc.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container simulation-report-desc" v-loading="loading">
-        <div style="background-color: #fff;padding:20px;margin-bottom: 60px;" id="print_simulation_report_desc">
+    <div style="padding:20px;margin-bottom: 60px;" id="print_simulation_report_desc">
       <div class="report-name">{{ info.report.report_name }}</div>
       <div class="report-info">
         <el-row>
@@ -31,7 +31,7 @@
       <template v-if="info.reportType == 'other'">
         <div class="task-lists" v-if="info.tasks && info.tasks.length > 0">
           <div v-for="(it, idx) in info.tasks" :key="idx">
-                        <div class="sub-title">{{ it.taskName|| info.report.report_name }}的测试报告</div>
+            <div class="sub-title">{{ it.taskName || info.report.report_name }}的测试报告</div>
             <template v-if="info.reportType == 'other'">
               <div v-if="info.thresholds" class="info-thresholds">
                 <span>置信度阈值：</span>
@@ -106,8 +106,8 @@
               </template>
             </el-table-column>
           </el-table>
-                    <div style="margin-top:20px;">
+          <div style="margin-top:20px;" :key="info.chartKey">
-                        <charts id="reportChart3-robustness" width="100%" height="400px" :render="renderChar3">
+            <charts :key="info.chartKey" id="reportChart3-robustness" width="100%" height="400px" :render="renderChar3">
             </charts>
           </div>
         </template>
@@ -214,10 +214,18 @@
 </template>
 
 <script setup>
+import {
+  useSettingsStore,
+} from "@/store";
 import ReportApi from '@/api/report'
 import charts from './components/charts.vue'
 import html2canvas from 'html2canvas';
 import { useDateFormat } from "@vueuse/core";
+import { ThemeEnum } from "@/enums/ThemeEnum";
+import eventBus from '@/utils/eventBus.js'
+
+const settingsStore = useSettingsStore();
+const isDark = ref(settingsStore.theme === ThemeEnum.DARK);
 const route = useRoute()
 const router = useRouter();
 const info = reactive({
@@ -232,6 +240,8 @@ const info = reactive({
   horizontal_comparison: [],
   isPrint: false,
   elPrint: 0,
+  theme:settingsStore.theme,
+  chartKey:0,
 })
 const loading = ref(false)
 const calcChartHeight = it => {
@@ -301,8 +311,8 @@ function renderChar4() {
   let maxTime1 = 0;
   let maxTime2 = 0;
   let micro_f1 = 1;
-    let maxIdsw=0;
+  let maxIdsw = 0;
-    let maxFm=0;
+  let maxFm = 0;
   let seriesData = [];
   datas.forEach((d, idx) => {
     if (d.inference_time > maxTime1) {
@@ -325,10 +335,10 @@ function renderChar4() {
         name: idx + 1 + "-" + d.device_name,
         value: [d.micro_f1, d.macro_f1, d.weight_f1, d.mAP, d.inference_time, d.system_delay]
       })
-        }else{
+    } else {
       seriesData.push({
         name: idx + 1 + "-" + d.device_name,
-                value: [d.idsw, d.mt, d.ml, d.fm,d.mota, d.inference_time, d.system_delay]
+        value: [d.idsw, d.mt, d.ml, d.fm, d.mota, d.inference_time, d.system_delay]
       })
     }
   });
@@ -353,13 +363,19 @@ function renderChar4() {
   }
   let opt = {
     title: {
-            text: '硬件横向对比测试图'
+      text: '硬件横向对比测试图',
+      textStyle:{
+        color:isDark.value? "#fff":"#333"
+      }
     },
     legend: {
       x: 'left',
       top: 40,
       orient: 'vertical',
-            data: datas.map((d, idx) => idx + 1 + "-" + d.device_name)
+      data: datas.map((d, idx) => idx + 1 + "-" + d.device_name),
+      textStyle:{
+        color:isDark.value? "#fff":"#333"
+      }
     },
     tooltip: {
       trigger: 'axis'
@@ -455,13 +471,19 @@ function renderChar3() {
   }
   let opt = {
     title: {
-            text: '推理结果比对图'
+      text: '推理结果比对图',
+      textStyle:{
+        color:isDark.value? "#fff":"#333"
+      }
     },
     legend: {
       x: 'left',
       top: 40,
       orient: 'vertical',
-            data: legendDatas
+      data: legendDatas,
+      textStyle:{
+        color:isDark.value? "#fff":"#333"
+      }
     },
     tooltip: {
       trigger: 'axis'
@@ -498,16 +520,25 @@ function renderChart1(data, type) {
   let opt = {
     legend: {
       left: '10%', right: '20%',
-            data: chartInfo.names
+      data: chartInfo.names,
+      textStyle:{
+        color:isDark.value? "#fff":"#333"
+      }
     },
     grid: { top: gridTop, },
     xAxis: [{
       type: 'category',   // 还有其他的type，可以去官网喵两眼哦
       data: chartInfo.labels,   // x轴数据
+      textStyle:{
+        color:isDark.value? "#fff":"#333"
+      }
     }],
     yAxis: [{
       type: 'value',
-            name: type == 'roc' ? "ROC曲线" : "RP曲线"
+      name: type == 'roc' ? "ROC曲线" : "RP曲线",
+      textStyle:{
+        color:isDark.value? "#fff":"#333"
+      }
     }],
     tooltip: {
       trigger: 'axis'
@@ -546,7 +577,17 @@ function initTaskChart(it) {
     rocs, rps, names, labels
   }
 }
+onUnmounted(()=>{
+  eventBus.off("changeTheme");
+});
 function loadData() {
+  eventBus.on("changeTheme",d=>{
+    info.theme=d;
+    info.chartKey++;
+    isDark.value=d== ThemeEnum.DARK;
+  });
+
+
   let id = route.query.id;
   ReportApi.getReport(id).then(d => {
     info.report = d.data.data || {};
@@ -559,8 +600,8 @@ function loadData() {
         system_delay: it.system_delay, task_id: it.task_id, weight_f1: it.weight_f1
       }];
       it.chartsInfo = initTaskChart(it);
-            let tmps=info.taskList.filter(task=>task.task_id==it.task_id);
+      let tmps = info.taskList.filter(task => task.task_id == it.task_id);
-            it.taskName=tmps.length>0?tmps[0].task_name||"":"";
+      it.taskName = tmps.length > 0 ? tmps[0].task_name || "" : "";
       return it;
     });
     let obj = info.report?.report_data?.robustness?.tasks || null
@@ -592,6 +633,10 @@ onMounted(loadData);
 
   font-size: 12px;
 
+  #print_simulation_report_desc {
+    background: #fff;
+  }
+
   .report-name {
     font-size: 20px;
     text-align: center;
@@ -699,3 +744,12 @@ html.report-print {
   margin: 20px;
 }
 </style>
+<style lang="scss">
+html.dark {
+  .simulation-report-desc {
+    #print_simulation_report_desc {
+      background: #304156;
+    }
+  }
+}
+</style>

yarn.lock

@@ -6525,7 +6525,7 @@ minimist@^1.2.0, minimist@^1.2.6:
 
 mitt@^3.0.1:
   version "3.0.1"
-  resolved "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz"
+  resolved "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz#ea36cf0cc30403601ae074c8f77b7092cdab36d1"
   integrity sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==
 
 mixin-deep@^1.2.0: