feat: 增加 vue-data-ui 的主题切换功能，增加 usehook实现全局监听主题切换自动重新绘图的处理

src/hooks/useCommon.ts

@@ -1,4 +1,6 @@
-import { reactive, ref } from 'vue'
+import { reactive, ref, watch } from 'vue'
+import { useStore } from '/@/store/index';
+
 
 export default function () {
   const statusParams = reactive({
@@ -57,3 +59,13 @@ export function useSearch<T>(api: any, resKey: string, expandParams?: any) {
 
   return { params, tableData, getList, loading, resetQuery }
 }
+
+export function useThemeChange(configArr: any[]) {
+  const store = useStore();
+
+  watch(() => store.state.themeConfig.themeConfig.isIsDark, (isIsDark) => {
+    configArr.forEach(config => {
+      config.value.theme = isIsDark ? 'hack' : ''
+    })
+  });
+}

src/layout/navBars/breadcrumb/setings.vue

@@ -459,6 +459,7 @@ export default defineComponent({
 				body.setAttribute('data-theme', '');
 				document.querySelector('html')!.className = ''
 			}
+			store.dispatch('themeConfig/setThemeConfig', getThemeConfig.value);
 		};
 		// 4、界面显示 --> 开启水印
 		const onWartermarkChange = () => {

src/store/modules/themeConfig.ts

@@ -138,8 +138,9 @@ const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
 	},
 	mutations: {
 		// 设置布局配置
-		getThemeConfig(state: any, data: object) {
+		getThemeConfig(state: any, data: any) {
 			state.themeConfig = data;
+			localStorage.setItem('isDark', data?.isIsDark ? '1' : '')
 		},
 	},
 	actions: {

src/theme/dark.scss

@@ -268,9 +268,8 @@
 		background-color: var(--el-color-white) !important;
 	}
 
-
 	.el-table__body-wrapper tr td.el-table-fixed-column--left,
-	.el-table__body-wrapper tr td.el-table-fixed-column--right{
+	.el-table__body-wrapper tr td.el-table-fixed-column--right {
 		background-color: none !important;
 		background: none !important;
 	}
@@ -517,5 +516,3 @@
 		border-color: var(--el-bg-color-overlay) !important;
 	}
 }
-
-

src/utils/dataUiOptions.ts

@@ -1,3 +1,7 @@
+export function getTheme() {
+  // ("zen" | "hack" | "concrete" | "")
+  return localStorage.isDark ? 'hack' : ''
+}
 
 export function getLineData({ xAxis = [] as any[], datas = [] as number[][], legend = [] as string[], suffix = '', width = 1000, height = 400 }) {
   const colors = ['#6376DD', '#FBBB04']
@@ -7,11 +11,10 @@ export function getLineData({ xAxis = [] as any[], datas = [] as number[][], leg
   const radio = 10 ** (maxVal.toString().length - 2)
   const max = Math.ceil(maxVal * 1.4 / radio) * radio
   const config = {
+    theme: getTheme(),
     "chart": {
       "fontFamily": "inherit",
       "paddingTop": 0,
-      "backgroundColor": "transparent",
-      "color": "#888888",
       height,
       width,
       "zoom": {
@@ -27,7 +30,6 @@ export function getLineData({ xAxis = [] as any[], datas = [] as number[][], leg
         "position": "start",
         "labels": {
           "show": true,
-          "color": "#888888",
           "fontSize": 12,
           "axis": {
             "fontSize": 12
@@ -39,7 +41,6 @@ export function getLineData({ xAxis = [] as any[], datas = [] as number[][], leg
           },
           "xAxisLabels": {
             "show": true,
-            "color": "#888888",
             "values": xAxis,
             "fontSize": 12,
             "showOnlyFirstAndLast": false,
@@ -54,7 +55,6 @@ export function getLineData({ xAxis = [] as any[], datas = [] as number[][], leg
       },
       "legend": {
         "show": legend.length > 1,
-        "color": "#888888",
         "fontSize": 12
       },
       "title": {
@@ -69,8 +69,7 @@ export function getLineData({ xAxis = [] as any[], datas = [] as number[][], leg
       "radius": 3,
       "useGradient": true,
       "strokeWidth": 2,
-      "labels": {
-      },
+      "labels": {},
       "area": {
         "useGradient": true,
         "opacity": "26"
@@ -97,10 +96,11 @@ export function getLineData({ xAxis = [] as any[], datas = [] as number[][], leg
   return { config, dataset }
 }
 
-export function getLine2Data({ xAxis = [] as any[], datas = [] as number[][], legend = [] as string[], suffix = '', width = 600, height = 300, color = 'rgb(1, 191, 236)' }) {
+export function getLine2Data({ xAxis = [] as any[], datas = [] as number[][], legend = [] as string[], suffix = '', width = 500, height = 300, color = 'rgb(1, 191, 236)' }) {
 
   const max = 100
   const config = {
+    theme: getTheme(),
     "responsive": false,
     "chart": {
       "fontFamily": "inherit",
@@ -114,9 +114,9 @@ export function getLine2Data({ xAxis = [] as any[], datas = [] as number[][], le
       },
       "padding": {
         "top": 10,
-        "right": 10,
-        "bottom": 10,
-        "left": 10
+        "right": 24,
+        "bottom": 30,
+        "left": 24
       },
       "grid": {
         "position": "start",
@@ -198,13 +198,14 @@ export function getPieData({ datas = [] as number[][], legend = [] as string[],
   const colorList = ['#4285F4', '#2ecc71', '#FBBB04', '#e67e22', '#FF0000'].reverse()
 
   const config = {
+    theme: getTheme(),
+    "backgroundColor": "transparent",
     style: {
-      "color": "#888888",
+      "backgroundColor": "transparent",
       chart: {
         "fontFamily": "inherit",
         "paddingTop": 0,
         "backgroundColor": "transparent",
-        "color": "#888888",
         height,
         width,
         "padding": {
@@ -221,7 +222,6 @@ export function getPieData({ datas = [] as number[][], legend = [] as string[],
           "show": true,
           "bold": false,
           "backgroundColor": "transparent",
-          "color": "#888888",
           "fontSize": 14,
           "roundingValue": 0,
           "roundingPercentage": 0
@@ -230,20 +230,17 @@ export function getPieData({ datas = [] as number[][], legend = [] as string[],
           "labels": {
             value: { rounding: 0, show: true, formatter: null },
             percentage: {
-              color: "#888888",
               bold: true,
               fontSize: 18,
               rounding: 0,
               formatter: null,
             },
-            name: { color: "#888888", bold: false, fontSize: 14 },
+            name: { bold: false, fontSize: 14 },
             "hollow": {
               "total": {
                 "fontSize": 18,
-                "color": "#888888",
                 "text": "总计",
                 "value": {
-                  "color": "#888888",
                   "fontSize": 18,
                 }
               },
@@ -260,7 +257,6 @@ export function getPieData({ datas = [] as number[][], legend = [] as string[],
     },
   }
 
-
   // const dataset = [{ "name": "Series 1", "values": [100] }, { "name": "Series 2", "values": [50] }, { "name": "Series 3", "values": [25] }, { "name": "Series 4", "values": [12.5] }]
 
   const dataset = datas.map((data, i) => {
@@ -273,8 +269,8 @@ export function getPieData({ datas = [] as number[][], legend = [] as string[],
 export function getGaugeData({ value = 50 }) {
 
   const config = {
+    theme: getTheme(),
     "responsive": false,
-    "theme": "",
     "customPalette": [],
     "style": {
       "fontFamily": "inherit",

src/views/iot/iotmanager/dashboard.vue

@@ -89,11 +89,12 @@ import { toRefs, reactive, onMounted, ref, watch, nextTick, onActivated, getCurr
 import { useRouter } from 'vue-router';
 import { VueUiXy, VueUiDonut } from "vue-data-ui";
 import "vue-data-ui/style.css";
-import { getLineData, getPieData } from "/@/utils/dataUiOptions";
+import { getLineData, getPieData, getTheme } from "/@/utils/dataUiOptions";
 import api from '/@/api/datahub';
 import dayjs from 'dayjs';
 import EditDic from '../alarm/log/component/edit.vue';
 import DetailDic from '../alarm/log/component/detail.vue';
+import { useThemeChange } from '/@/hooks/useCommon';
 
 // 页面是显示状态
 let isActice = true
@@ -123,6 +124,9 @@ const pieData = getPieData({
 const pieConfig = ref<any>(pieData.config);
 const pieDataset = ref<any[]>(pieData.dataset);
 
+// 监听暗黑模式变化，将 vue-data-ui 的 config 传进来，就能自动更新主题
+useThemeChange([config, pieConfig])
+
 //#endregion
 
 onUnmounted(() => {
@@ -382,6 +386,7 @@ onMounted(() => {
 	getOverviewData();
 	getAlarmList();
 });
+
 </script>
 
 <style scoped lang="scss">

src/views/login/index.vue

@@ -99,6 +99,7 @@ export default defineComponent({
 				body.setAttribute('data-theme', '');
 				document.querySelector('html')!.className = ''
 			}
+			store.dispatch('themeConfig/setThemeConfig', getThemeConfig.value);
 		};
 
 		return {

src/views/system/monitor/server/index.vue

@@ -85,6 +85,7 @@ import { getSSEOrigin } from '/@/utils/origin'
 import { VueUiGauge, VueUiXy } from "vue-data-ui";
 import "vue-data-ui/style.css";
 import { getGaugeData, getLine2Data } from "/@/utils/dataUiOptions";
+import { useThemeChange } from '/@/hooks/useCommon';
 
 let interval: any = null;
 let es: any = null;
@@ -122,6 +123,9 @@ const config5 = ref<any>(chartLineData.config);
 const dataset6 = ref<any>(chartLineData.dataset);
 const config6 = ref<any>(chartLineData.config);
 
+// 监听暗黑模式变化，将 vue-data-ui 的 config 传进来，就能自动更新主题
+useThemeChange([config, config2, config3, config4, config5, config6])
+
 //#endregion
 
 let myChart4: any;