数据概览适配黑色模式

package.json

@@ -14,6 +14,7 @@
     "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
   },
   "dependencies": {
+    "@antv/g2plot": "^2.4.20",
     "@element-plus/icons-vue": "^2.0.9",
     "amis": "^2.1.1-beta.2",
     "axios": "^0.26.0",

src/theme/dark.scss

@@ -415,4 +415,8 @@
 	.layout-columns-aside {
 		border-right: 1px solid var(--next-border-columns);
 	}
+
+	.data-overview  .home-card-one .home-card-item *span{
+		color: var(--next-color-white) !important;
+	}
 }

src/views/dataOverview/index.vue

@@ -13,7 +13,7 @@
 			>
 				<div class="home-card-item">
 					<div class="item-header">
-						<img :src="v.icon" alt="">
+						<img :src="isIsDark?v.iconDark:v.icon" alt="">
 						<span>{{v.title}}</span>
 					</div>
 					<div class="item-content w100" :class="` home-one-animation${k}`">
@@ -108,9 +108,11 @@ export default defineComponent({
 		const homeBarRef = ref();
 		const store = useStore();
 		const state = reactive({
+			isIsDark: false,
 			dataOne: [
 				{
 					icon: "/@/assets/area.png",
+					iconDark: "/@/assets/area1.png",
 					title: '供暖面积',
 					contentTitle1: '供热面积',
 					val1: '2112.12',
@@ -121,6 +123,7 @@ export default defineComponent({
 				},
 				{
 					icon: "@/assets/fire.png",
+					iconDark: "/@/assets/fire1.png",
 					title: '热量',
 					contentTitle1: '总耗热',
 					val1: '4500',
@@ -131,6 +134,7 @@ export default defineComponent({
 				},
 				{
 					icon: "@/assets/ele.png",
+					iconDark: "/@/assets/ele1.png",
 					title: '电量',
 					contentTitle1: '总耗电',
 					val1: '5200',
@@ -141,6 +145,7 @@ export default defineComponent({
 				},
 				{
 					icon: "@/assets/water.png",
+					iconDark: "/@/assets/water1.png",
 					title: '水量',
 					contentTitle1: '总耗水',
 					val1: '4500',
@@ -550,6 +555,8 @@ export default defineComponent({
 		// 页面加载时
 		onMounted(() => {
 			initEchartsResize();
+				// 获取布局配置信息
+				state.isIsDark =  store.state.themeConfig.themeConfig.isIsDark;
 		});
 		// 由于页面缓存原因，keep-alive
 		onActivated(() => {
@@ -565,6 +572,17 @@ export default defineComponent({
 		// 监听 vuex 中是否开启深色主题
 		watch(
 			() => store.state.themeConfig.themeConfig.isIsDark,
+			() => {
+				state.isIsDark =  store.state.themeConfig.themeConfig.isIsDark
+			},
+			{
+				deep: true,
+				immediate: true,
+			}
+		);
+		// 监听 vuex 中是否开启深色主题
+		watch(
+			() => store.state.themeConfig.themeConfig.isIsDark,
 			(isIsDark) => {
 				nextTick(() => {
 					state.charts.theme = isIsDark ? 'dark' : '';