主题修改

src/styles/element.scss

@@ -1,364 +1,371 @@
 /* el-alert */
+
 .el-alert {
-  border: 1px solid;
+    border: 1px solid;
 }
 
+
 /* 当前页面最大化 css */
+
 .main-maximize {
-  .aside-split,
-  .el-aside,
-  .el-header,
-  .el-footer,
-  .tabs-box {
-    display: none !important;
-  }
+    .aside-split,
+    .el-aside,
+    .el-header,
+    .el-footer,
+    .tabs-box {
+        display: none !important;
+    }
 }
 
+
 /* mask image */
+
 .mask-image {
-  padding-right: 50px;
-  mask-image: linear-gradient(90deg, #000000 0%, #000000 calc(100% - 50px), transparent);
+    padding-right: 50px;
+    mask-image: linear-gradient(90deg, #000000 0%, #000000 calc(100% - 50px), transparent);
 }
 
+
 /* custom card */
+
 .card {
-  box-sizing: border-box;
-  padding: 20px;
-  overflow-x: hidden;
-  background-color: var(--el-bg-color);
-  border: 1px solid var(--el-border-color-light);
-  border-radius: 10px;
-  box-shadow: 0 0 12px rgb(0 0 0 / 5%);
+    box-sizing: border-box;
+    padding: 20px;
+    overflow-x: hidden;
+    background-color: var(--el-bg-color);
+    border: 1px solid var(--el-border-color-light);
+    border-radius: 10px;
+    box-shadow: 0 0 12px rgb(0 0 0 / 5%);
+}
+
+.zhuti {
+    background-color: var(--el-bg-color) !important;
+    border: 1px solid var(--el-border-color-light);
 }
 
+
 /* ProTable 不需要 card 样式（在组件内使用 ProTable 会使用到） */
+
 .no-card {
-  .card {
-    padding: 0;
-    background-color: transparent;
-    border: none;
-    border-radius: 0;
-    box-shadow: none;
-  }
-  .table-search {
-    padding: 18px 0 0 !important;
-    margin-bottom: 0 !important;
-  }
+    .card {
+        padding: 0;
+        background-color: transparent;
+        border: none;
+        border-radius: 0;
+        box-shadow: none;
+    }
+    .table-search {
+        padding: 18px 0 0 !important;
+        margin-bottom: 0 !important;
+    }
 }
 
+
 /* content-box (常用内容盒子) */
+
 .content-box {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  height: 100%;
-  .text {
-    margin: 20px 0 30px;
-    font-size: 23px;
-    font-weight: bold;
-    color: var(--el-text-color-regular);
-  }
-  .el-descriptions {
-    width: 100%;
-    padding: 40px 0 0;
-    .el-descriptions__title {
-      font-size: 18px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 100%;
+    .text {
+        margin: 20px 0 30px;
+        font-size: 23px;
+        font-weight: bold;
+        color: var(--el-text-color-regular);
     }
-    .el-descriptions__label {
-      width: 200px;
+    .el-descriptions {
+        width: 100%;
+        padding: 40px 0 0;
+        .el-descriptions__title {
+            font-size: 18px;
+        }
+        .el-descriptions__label {
+            width: 200px;
+        }
     }
-  }
 }
 
+
 /* main-box (树形表格 treeFilter 页面会使用，左右布局 flex) */
+
 .main-box {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  .table-box {
-    overflow: hidden;
-  }
+    display: flex;
+    width: 100%;
+    height: 100%;
+    .table-box {
+        overflow: hidden;
+    }
 }
 
+
 /* proTable */
+
 .table-box,
 .table-main {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-
-  .table-search2{
-    padding: 18px 18px;
-    margin-bottom: 10px;
-  }
-
-  // table-search 表格搜索样式
-  .table-search {
-    padding: 18px 18px 0;
-    margin-bottom: 10px;
-    .el-form {
-      .el-form-item__content > * {
-        width: 100%;
-      }
-
-      // 去除时间选择器上下 padding
-      .el-range-editor.el-input__wrapper {
-        padding: 0 10px;
-      }
-    }
-    .operation {
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      margin-bottom: 18px;
-    }
-  }
-
-  // 表格 header 样式
-  .table-header {
-    .header-button-lf,
-    .header-button-ri {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 15px 12px;
-      .el-button:not(.el-input .el-button) {
-        margin-left: 0;
-      }
-    }
-    .header-button-lf {
-      float: left;
-    }
-    .header-button-ri {
-      float: right;
-    }
-  }
-
-  // el-table 表格样式
-  .el-table {
+    display: flex;
     flex: 1;
-    border: 1px solid var(--el-color-primary-light-5);
-    table {
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    .table-search2 {
+        padding: 18px 18px;
+        margin-bottom: 10px;
     }
-    .el-table__header-wrapper {
-      border-bottom: 1px solid var(--el-color-primary-light-5);
+    // table-search 表格搜索样式
+    .table-search {
+        padding: 18px 18px 0;
+        margin-bottom: 10px;
+        .el-form {
+            .el-form-item__content>* {
+                width: 100%;
+            }
+            // 去除时间选择器上下 padding
+            .el-range-editor.el-input__wrapper {
+                padding: 0 10px;
+            }
+        }
+        .operation {
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            margin-bottom: 18px;
+        }
     }
-
-
-
-  .el-table__header,
-   .el-table__body {
-      border-color:var(--el-color-primary-light-5);
+    // 表格 header 样式
+    .table-header {
+        .header-button-lf,
+        .header-button-ri {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 15px 12px;
+            .el-button:not(.el-input .el-button) {
+                margin-left: 0;
+            }
+        }
+        .header-button-lf {
+            float: left;
+        }
+        .header-button-ri {
+            float: right;
+        }
     }
-
-   .el-table__cell {
-      border-color: var(--el-color-primary-light-5);
+    // el-table 表格样式
+    .el-table {
+        flex: 1;
+        border: 1px solid var(--el-color-primary-light-5);
+        table {}
+        .el-table__header-wrapper {
+            border-bottom: 1px solid var(--el-color-primary-light-5);
+        }
+        .el-table__header,
+        .el-table__body {
+            border-color: var(--el-color-primary-light-5);
+        }
+        .el-table__cell {
+            border-color: var(--el-color-primary-light-5);
+        }
+        .el-table__body tr.el-table__row--striped td.el-table__cell {
+            background: #006FE809;
+        }
+        .el-table__header th {
+            height: 45px;
+            font-size: 14px;
+            font-weight: normal;
+            color: var(--el-text-color-primary);
+            background: var(--el-color-primary-light-9);
+        }
+        .el-table__row {
+            height: 45px;
+            font-size: 14px;
+            .move {
+                cursor: move;
+                .el-icon {
+                    cursor: move;
+                }
+            }
+        }
+        // 设置 el-table 中 header 文字不换行，并省略
+        .el-table__header .el-table__cell>.cell {
+            // white-space: nowrap;
+            white-space: wrap;
+        }
+        // 解决表格数据为空时样式不居中问题(仅在element-plus中)
+        .el-table__empty-block {
+            position: absolute;
+            .table-empty {
+                line-height: 30px;
+                img {
+                    display: inline-flex;
+                }
+            }
+        }
+        // table 中 image 图片样式
+        .table-image {
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+        }
     }
-
-   .el-table__body tr.el-table__row--striped td.el-table__cell {
-     background: #006FE809;
+    // 表格 pagination 样式
+    .el-pagination {
+        display: flex;
+        justify-content: flex-end;
+        margin-top: 20px;
     }
+}
+
 
+/* el-table 组件大小 */
 
+.el-table--small {
     .el-table__header th {
-      height: 45px;
-      font-size: 14px;
-      font-weight: normal;
-      color: var(--el-text-color-primary);
-      background:  var(--el-color-primary-light-9);
+        height: 35px !important;
+        font-size: 14px !important;
     }
-
-
     .el-table__row {
-      height: 45px;
-      font-size: 14px;
-      .move {
-        cursor: move;
-        .el-icon {
-          cursor: move;
-        }
-      }
-    }
-
-    // 设置 el-table 中 header 文字不换行，并省略
-    .el-table__header .el-table__cell > .cell {
-      // white-space: nowrap;
-      white-space: wrap;
+        height: 35px !important;
+        font-size: 13px !important;
     }
+}
 
-    // 解决表格数据为空时样式不居中问题(仅在element-plus中)
-    .el-table__empty-block {
-      position: absolute;
-      .table-empty {
-        line-height: 30px;
-        img {
-          display: inline-flex;
-        }
-      }
+.el-table--large {
+    .el-table__header th {
+        height: 50px !important;
+        font-size: 16px !important;
     }
-
-    // table 中 image 图片样式
-    .table-image {
-      width: 50px;
-      height: 50px;
-      border-radius: 50%;
+    .el-table__row {
+        height: 50px !important;
+        font-size: 15px !important;
     }
-  }
-
-  // 表格 pagination 样式
-  .el-pagination {
-    display: flex;
-    justify-content: flex-end;
-    margin-top: 20px;
-  }
 }
 
-/* el-table 组件大小 */
-.el-table--small {
-  .el-table__header th {
-    height: 35px !important;
-    font-size: 14px !important;
-  }
-  .el-table__row {
-    height: 35px !important;
-    font-size: 13px !important;
-  }
-}
-.el-table--large {
-  .el-table__header th {
-    height: 50px !important;
-    font-size: 16px !important;
-  }
-  .el-table__row {
-    height: 50px !important;
-    font-size: 15px !important;
-  }
-}
 
 /* el-drawer */
+
 .el-drawer {
-  .el-drawer__header {
-    padding: 16px 20px;
-    margin-bottom: 0;
-    border-bottom: 1px solid var(--el-border-color-lighter);
-    span {
-      font-size: 17px;
-      line-height: 17px;
-      color: var(--el-text-color-primary) !important;
+    .el-drawer__header {
+        padding: 16px 20px;
+        margin-bottom: 0;
+        border-bottom: 1px solid var(--el-border-color-lighter);
+        span {
+            font-size: 17px;
+            line-height: 17px;
+            color: var(--el-text-color-primary) !important;
+        }
     }
-  }
-  .el-drawer__footer {
-    border-top: 1px solid var(--el-border-color-lighter);
-  }
-
-  // select 样式
-  .el-select {
-    width: 100%;
-  }
-
-  // drawer-form 中存在两列 form-item 样式
-  .drawer-multiColumn-form {
-    display: flex;
-    flex-wrap: wrap;
-    .el-form-item {
-      width: 47%;
-      &:nth-child(2n-1) {
-        margin-right: 5%;
-      }
+    .el-drawer__footer {
+        border-top: 1px solid var(--el-border-color-lighter);
+    }
+    // select 样式
+    .el-select {
+        width: 100%;
+    }
+    // drawer-form 中存在两列 form-item 样式
+    .drawer-multiColumn-form {
+        display: flex;
+        flex-wrap: wrap;
+        .el-form-item {
+            width: 47%;
+            &:nth-child(2n-1) {
+                margin-right: 5%;
+            }
+        }
     }
-  }
 }
 
-/* el-tabs */
-.el-tabs{
-  .el-tabs__item.is-active {
-    color: var(--el-color-primary);
-    background-color: var(--el-color-primary-light-9);;
-    border-radius: 10px;
-  }
 
- .is-left {
-    justify-content: flex-start!important;
-    margin-right: 5px;
-  }
+/* el-tabs */
 
-  .el-tabs__active-bar {
-    background-color: #00000000;
-  }
+.el-tabs {
+    .el-tabs__item.is-active {
+        color: var(--el-color-primary);
+        background-color: var(--el-color-primary-light-9);
+        ;
+        border-radius: 10px;
+    }
+    .is-left {
+        justify-content: flex-start!important;
+        margin-right: 5px;
+    }
+    .el-tabs__active-bar {
+        background-color: #00000000;
+    }
 }
 
+
 /* el-dialog */
+
 .el-dialog {
-  padding: 0;
-  border-radius: 10px;
-  --el-dialog-margin-top: 10vh;
-  .el-dialog__header {
-    padding: 15px 0px;
-    margin: 0 20px;
-    border-bottom: 1px solid var(--el-border-color-lighter);
-    .el-dialog__title {
-      font-size: 17px;
+    padding: 0;
+    border-radius: 10px;
+    --el-dialog-margin-top: 10vh;
+    .el-dialog__header {
+        padding: 15px 0px;
+        margin: 0 20px;
+        border-bottom: 1px solid var(--el-border-color-lighter);
+        .el-dialog__title {
+            font-size: 17px;
+        }
+    }
+    .el-dialog__body,
+    .el-dialog__footer {
+        padding: 15px 20px;
+    }
+    .el-dialog__headerbtn {
+        margin-top: 5px;
     }
-  }
-  .el-dialog__body,
-  .el-dialog__footer {
-    padding: 15px 20px;
-  }
-  .el-dialog__headerbtn {
-    margin-top: 5px;
-  }
 }
 
 .setting {
-  height: 20px;
-  width: 20px;
-  margin-top: 10px;
-  margin-right: 5px;
-  cursor: pointer;
+    height: 20px;
+    width: 20px;
+    margin-top: 10px;
+    margin-right: 5px;
+    cursor: pointer;
 }
 
 .form-item__label {
-  align-items: flex-start;
-  box-sizing: border-box;
-  color: var(--el-text-color-regular);
-  display: inline-flex;
-  flex: 0 0 auto;
-  font-size: var(--el-form-label-font-size);
-  height: 32px;
-  justify-content: flex-end;
-  line-height: 32px;
-  margin-left: 10px;
-  padding: 0 12px 0 0;
+    align-items: flex-start;
+    box-sizing: border-box;
+    color: var(--el-text-color-regular);
+    display: inline-flex;
+    flex: 0 0 auto;
+    font-size: var(--el-form-label-font-size);
+    height: 32px;
+    justify-content: flex-end;
+    line-height: 32px;
+    margin-left: 10px;
+    padding: 0 12px 0 0;
 }
 
-.operation-img{
-  width: 15px;
-  height: 15px;
-  cursor: pointer;
+.operation-img {
+    width: 15px;
+    height: 15px;
+    cursor: pointer;
 }
 
-.el-picker-panel__body{
-  .el-input--small {
-    font-size: 15px!important;
-  }
+.el-picker-panel__body {
+    .el-input--small {
+        font-size: 15px!important;
+    }
 }
 
 
 /* tree border */
+
 .tree-border {
-  margin-top: 5px;
-  border: 1px solid #e5e6e7;
-  background: #ffffff none;
-  border-radius: 4px;
-  width: 100%;
+    margin-top: 5px;
+    border: 1px solid #e5e6e7;
+    background: #ffffff none;
+    border-radius: 4px;
+    width: 100%;
 }
 
 .el-radio__input.is-checked+.el-radio__label {
-  color: var(--el-text-color-regular);
+    color: var(--el-text-color-regular);
 }
 
 .el-checkbox__input.is-checked+.el-checkbox__label {
-  color: var(--el-text-color-regular);
-}
-
+    color: var(--el-text-color-regular);
+}

src/views/alarm/allDevice/index.vue

@@ -10,16 +10,16 @@
 				</el-form-item>
 				<el-form-item>
 					<div>
-						<el-button plain>查询</el-button>
+						<el-button type="primary">查询</el-button>
 						<el-button plain @click="resetForm(formRef)">重置</el-button>
 					</div>
 				</el-form-item>
 			</el-form>
 		</div>
-		<div class="main_list">
+		<div class="main_list ">
 			<el-row :gutter="15">
 				<el-col :xs="24" :sm="12" :md="8" :lg="8">
-					<div class="chart_item">
+					<div class="chart_item zhuti">
 						<div style="font-weight: bold;" class="item_title">
 							<span>设备工况(单位:台)</span>
 						</div>
@@ -29,7 +29,7 @@
 					</div>
 				</el-col>
 				<el-col :xs="24" :sm="12" :md="8" :lg="8">
-					<div class="chart_item">
+					<div class="chart_item zhuti">
 						<div style="font-weight: bold;" class="item_title">
 							<span>检定周期(单位:台)</span>
 						</div>
@@ -39,7 +39,7 @@
 					</div>
 				</el-col>
 				<el-col :xs="24" :sm="12" :md="8" :lg="8">
-					<div class="chart_item">
+					<div class="chart_item zhuti">
 						<div style="font-weight: bold;" class="item_title">
 							<span>FTP链路</span>
 						</div>
@@ -60,7 +60,7 @@
 			</el-row>
 			<el-row :gutter="15">
 				<el-col :span="24">
-					<div class="chart_item">
+					<div class="chart_item zhuti">
 						<div style="font-weight: bold;" class="item_title">
 							<span>危险天气</span>
 						</div>
@@ -81,7 +81,7 @@
 			</el-row>
 			<el-row :gutter="15">
 				<el-col :span="24">
-					<div class="chart_item">
+					<div class="chart_item zhuti">
 						<div style="font-weight: bold;" class="item_title">
 							<span>到报监控</span>
 						</div>
@@ -98,8 +98,9 @@
 <script setup lang="ts" name="allDevice">
 import * as echarts from 'echarts';
 
-import { ref, reactive, onMounted } from "vue";
+import { ref, reactive, onMounted, computed, watch } from "vue";
 import { useRouter } from "vue-router";
+import { useGlobalStore } from "@/stores/modules/global";
 
 
 const formRef = ref()
@@ -123,13 +124,18 @@ const baseOptions = ref([{
 	label: '基地2',
 }])
 
+
 // resetForm
 const resetForm = (formEl) => {
 	if (!formEl) return;
 	formEl.resetFields();
 };
+const globalStore = useGlobalStore();
+const isDark = computed(() => globalStore.isDark);
 
 const showDevice = () => {
+	// console.log(isDark.value,'颜色');
+
 	let mychart = echarts.init(device.value);
 	let option = {
 		tooltip: {
@@ -138,7 +144,10 @@ const showDevice = () => {
 		},
 		legend: {
 			bottom: '1%',
-			left: 'center'
+			left: 'center',
+			textStyle: {//图例文字的样式
+				color: isDark.value ? '#fff' : "#000",
+			}
 		},
 		series: [
 			{
@@ -210,7 +219,10 @@ const showPeriod = () => {
 		},
 		legend: {
 			bottom: 0,
-			left: 'center'
+			left: 'center',
+			textStyle: {//图例文字的样式
+				color: isDark.value ? '#fff' : "#000",
+			}
 		},
 		series: [
 			{
@@ -260,7 +272,10 @@ const showWeather = () => {
 		},
 		legend: {
 			bottom: '1%',
-			left: 'center'
+			left: 'center',
+			textStyle: {//图例文字的样式
+				color: isDark.value ? '#fff' : "#000",
+			}
 		},
 		series: [
 			{
@@ -397,14 +412,18 @@ const showElement = () => {
 
 const showControl = () => {
 	let mychart = echarts.init(control.value);
-	let  option = {
+	let option = {
 		tooltip: {
 			trigger: 'axis',
 			axisPointer: {
 				type: 'shadow'
 			}
 		},
-		legend: {},
+		legend: {
+			textStyle: {//图例文字的样式
+				color: isDark.value ? '#fff' : "#000",
+			}
+		},
 		grid: {
 			left: '15',
 			right: '15',
@@ -469,6 +488,8 @@ const showControl = () => {
 		mychart.resize();
 	});
 }
+watch(isDark, () => { showDevice(), showPeriod(), showWeather(), showElement(), showControl() });
+
 onMounted(() => {
 	showDevice()
 	showPeriod()

src/views/alarm/singleStationData/index.vue

@@ -17,7 +17,7 @@
 			</div>
 			<div class="header-button-ri">
 				<slot name="toolButton">
-					<img class="setting" src="@/assets/images/setting2.png"  @click="handleSetting"  />
+					<img class="setting" src="@/assets/images/setting2.png" @click="handleSetting" />
 				</slot>
 			</div>
 
@@ -25,12 +25,12 @@
 		<div class="main_list">
 			<el-row :gutter="15">
 				<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="4">
-					<div class="chart_item">
+					<div class="chart_item zhuti">
 						<div style="font-weight: bold;">天气现象</div>
 						<div class="mt15">
 							<div style="height: 200px;">
 								<div
-									style="text-align: center;margin-bottom: 40px;padding-top: 10px;font-weight: bold;color: #000;">
+									style="text-align: center;margin-bottom: 40px;padding-top: 10px;font-weight: bold;">
 									无明显天气现象</div>
 								<div style="font-weight: bold;">危险天气</div>
 								<div style="text-align: center;margin-top: 25px;color: red;font-weight: bold;">无</div>
@@ -40,7 +40,7 @@
 					</div>
 				</el-col>
 				<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="4">
-					<div class="chart_item">
+					<div class="chart_item zhuti">
 						<div style="font-weight: bold;">瞬时风 ( m/s )</div>
 						<div class="mt15 box1">
 							<div ref="windSpeed" class="ve-ring" style="height: 200px"></div>
@@ -50,7 +50,7 @@
 					</div>
 				</el-col>
 				<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="4">
-					<div class="chart_item">
+					<div class="chart_item zhuti">
 
 						<div style="font-weight: bold;">温度 ( ℃ )</div>
 						<div class="mt15">
@@ -61,7 +61,7 @@
 
 				</el-col>
 				<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="4">
-					<div class="chart_item">
+					<div class="chart_item zhuti">
 
 						<div style="font-weight: bold;">相对湿度 ( % )</div>
 						<div class="mt15">
@@ -74,7 +74,7 @@
 
 
 				<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="4">
-					<div class="chart_item">
+					<div class="chart_item zhuti">
 
 						<div style="font-weight: bold;">本站气压 ( hPa )</div>
 						<div class="mt15">
@@ -85,7 +85,7 @@
 
 				</el-col>
 				<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="4">
-					<div class="chart_item">
+					<div class="chart_item zhuti">
 						<div style="font-weight: bold;">小时/分钟雨量 ( mm )</div>
 						<div class="mt15">
 							<div style="height: 200px">
@@ -126,7 +126,7 @@
 
 			<el-row :gutter="15">
 				<el-col :xs="12" :sm="8" :md="8" :lg="4" :xl="4">
-					<div class="chart_item info_box">
+					<div class="chart_item info_box zhuti">
 						<div class="info_title">瞬时风速 ( m/s )</div>
 						<div class="mt15 ">
 							<div class="info_content">
@@ -136,7 +136,7 @@
 					</div>
 				</el-col>
 				<el-col :xs="12" :sm="8" :md="8" :lg="4" :xl="4">
-					<div class="chart_item info_box">
+					<div class="chart_item info_box zhuti">
 						<div class="info_title">瞬时风向 ( ° )</div>
 						<div class="mt15 ">
 							<div class="info_content">
@@ -146,7 +146,7 @@
 					</div>
 				</el-col>
 				<el-col :xs="12" :sm="8" :md="8" :lg="4" :xl="4">
-					<div class="chart_item info_box">
+					<div class="chart_item info_box zhuti">
 						<div class="info_title">气温 ( ℃ )</div>
 						<div class="mt15 ">
 							<div class="info_content">
@@ -156,7 +156,7 @@
 					</div>
 				</el-col>
 				<el-col :xs="12" :sm="8" :md="8" :lg="4" :xl="4">
-					<div class="chart_item info_box">
+					<div class="chart_item info_box zhuti">
 						<div class="info_title">相对湿度 ( % )</div>
 						<div class="mt15 ">
 							<div class="info_content">
@@ -166,7 +166,7 @@
 					</div>
 				</el-col>
 				<el-col :xs="12" :sm="8" :md="8" :lg="4" :xl="4">
-					<div class="chart_item info_box">
+					<div class="chart_item info_box zhuti">
 						<div class="info_title">露点温度 ( ℃ )</div>
 						<div class="mt15 ">
 							<div class="info_content">
@@ -176,7 +176,7 @@
 					</div>
 				</el-col>
 				<el-col :xs="12" :sm="8" :md="8" :lg="4" :xl="4">
-					<div class="chart_item info_box">
+					<div class="chart_item info_box zhuti">
 						<div class="info_title">地面温度 ( ℃ )</div>
 						<div class="mt15 ">
 							<div class="info_content">
@@ -186,7 +186,7 @@
 					</div>
 				</el-col>
 				<el-col :xs="12" :sm="8" :md="8" :lg="4" :xl="4">
-					<div class="chart_item info_box">
+					<div class="chart_item info_box zhuti">
 						<div class="info_title">云底高度 ( m )</div>
 						<div class="mt15 ">
 							<div class="info_content">
@@ -196,7 +196,7 @@
 					</div>
 				</el-col>
 				<el-col :xs="12" :sm="8" :md="8" :lg="4" :xl="4">
-					<div class="chart_item info_box">
+					<div class="chart_item info_box zhuti">
 						<div class="info_title">静电场强度 ( kV/m )</div>
 						<div class="mt15 ">
 							<div class="info_content" style="color:red ;">
@@ -206,7 +206,7 @@
 					</div>
 				</el-col>
 				<el-col :xs="12" :sm="8" :md="8" :lg="4" :xl="4">
-					<div class="chart_item info_box">
+					<div class="chart_item info_box zhuti">
 						<div class="info_title">总云量 ( 成 )</div>
 						<div class="mt15 ">
 							<div class="info_content">
@@ -216,7 +216,7 @@
 					</div>
 				</el-col>
 				<el-col :xs="12" :sm="8" :md="8" :lg="4" :xl="4">
-					<div class="chart_item info_box">
+					<div class="chart_item info_box zhuti">
 						<div class="info_title">低云云量 ( 成 )</div>
 						<div class="mt15 ">
 							<div class="info_content">
@@ -226,7 +226,7 @@
 					</div>
 				</el-col>
 				<el-col :xs="12" :sm="8" :md="8" :lg="4" :xl="4">
-					<div class="chart_item info_box">
+					<div class="chart_item info_box zhuti">
 						<div class="info_title">光照度 ( lx )</div>
 						<div class="mt15 ">
 							<div class="info_content">
@@ -236,7 +236,7 @@
 					</div>
 				</el-col>
 				<el-col :xs="12" :sm="8" :md="8" :lg="4" :xl="4">
-					<div class="chart_item info_box">
+					<div class="chart_item info_box zhuti">
 						<div class="info_title">小时累计日照时数 ( min )</div>
 						<div class="mt15 ">
 							<div class="info_content">
@@ -249,7 +249,7 @@
 
 			<el-row :gutter="15">
 				<el-col :xs="12" :sm="8" :md="8" :lg="8">
-					<div class="chart_item">
+					<div class="chart_item zhuti">
 						<div style="font-weight: bold;" class="item_title">
 							<span>风向 / 风速 ( m/s )</span>
 							<el-select v-model="value" placeholder="请选择" size="small" style="width: 150px;">
@@ -264,7 +264,7 @@
 					</div>
 				</el-col>
 				<el-col :xs="12" :sm="8" :md="8" :lg="8">
-					<div class="chart_item">
+					<div class="chart_item zhuti">
 						<div style="font-weight: bold;" class="item_title">
 							<span>气温 ( ℃ ) / 相对湿度 ( % )</span>
 							<el-select v-model="value" placeholder="请选择" size="small" style="width: 150px;">
@@ -279,7 +279,7 @@
 					</div>
 				</el-col>
 				<el-col :xs="12" :sm="8" :md="8" :lg="8">
-					<div class="chart_item">
+					<div class="chart_item zhuti">
 						<div style="font-weight: bold;" class="item_title">
 							<span>本站气压 ( hPa )</span>
 							<el-select v-model="value" placeholder="请选择" size="small" style="width: 150px;">
@@ -296,49 +296,50 @@
 			</el-row>
 		</div>
 		<!-- 添加或修改岗位对话框 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="940px" append-to-body>
-      <div style="height: 500px">
-        <el-tabs tab-position="left" class="demo-tabs" style="height: 100%">
-          <el-tab-pane label="风">
-            <div class="container-tag">
-              <div class="item-tag">2分钟平均风速</div>
-              <div class="item-tag-active">2分钟平均风向</div>
-              <div class="item-tag">10分钟平均风速</div>
-              <div class="item-tag">10分钟平均风向</div>
-              <div class="item-tag">小时最大风速</div>
-              <div class="item-tag-active">小时最大风速的风向</div>
-              <div class="item-tag">小时极大风速出现时间</div>
-            </div>
-          </el-tab-pane>
-          <el-tab-pane label="温湿度">Config</el-tab-pane>
-          <el-tab-pane label="气压">Role</el-tab-pane>
-          <el-tab-pane label="降水">Task</el-tab-pane>
-          <el-tab-pane label="云">Task</el-tab-pane>
-          <el-tab-pane label="能见度">Task</el-tab-pane>
-          <el-tab-pane label="天气现象">Task</el-tab-pane>
-          <el-tab-pane label="积雪">Task</el-tab-pane>
-          <el-tab-pane label="地面温度">Task</el-tab-pane>
-          <el-tab-pane label="大气电场">Task</el-tab-pane>
-          <el-tab-pane label="闪电">Task</el-tab-pane>
-          <el-tab-pane label="日照">Task</el-tab-pane>
-          <el-tab-pane label="总辐射">Task</el-tab-pane>
-        </el-tabs>
-      </div>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="cancel">取 消</el-button>
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-        </div>
-      </template>
-    </el-dialog>
+		<el-dialog :title="dialog.title" v-model="dialog.visible" width="940px" append-to-body>
+			<div style="height: 500px">
+				<el-tabs tab-position="left" class="demo-tabs" style="height: 100%">
+					<el-tab-pane label="风">
+						<div class="container-tag">
+							<div class="item-tag">2分钟平均风速</div>
+							<div class="item-tag-active">2分钟平均风向</div>
+							<div class="item-tag">10分钟平均风速</div>
+							<div class="item-tag">10分钟平均风向</div>
+							<div class="item-tag">小时最大风速</div>
+							<div class="item-tag-active">小时最大风速的风向</div>
+							<div class="item-tag">小时极大风速出现时间</div>
+						</div>
+					</el-tab-pane>
+					<el-tab-pane label="温湿度">Config</el-tab-pane>
+					<el-tab-pane label="气压">Role</el-tab-pane>
+					<el-tab-pane label="降水">Task</el-tab-pane>
+					<el-tab-pane label="云">Task</el-tab-pane>
+					<el-tab-pane label="能见度">Task</el-tab-pane>
+					<el-tab-pane label="天气现象">Task</el-tab-pane>
+					<el-tab-pane label="积雪">Task</el-tab-pane>
+					<el-tab-pane label="地面温度">Task</el-tab-pane>
+					<el-tab-pane label="大气电场">Task</el-tab-pane>
+					<el-tab-pane label="闪电">Task</el-tab-pane>
+					<el-tab-pane label="日照">Task</el-tab-pane>
+					<el-tab-pane label="总辐射">Task</el-tab-pane>
+				</el-tabs>
+			</div>
+			<template #footer>
+				<div class="dialog-footer">
+					<el-button @click="cancel">取 消</el-button>
+					<el-button type="primary" @click="submitForm">确 定</el-button>
+				</div>
+			</template>
+		</el-dialog>
 	</div>
-	
+
 </template>
 
 <script setup lang="tsx" name="singleData">
 
 import * as echarts from 'echarts';
-import { ref, computed, onMounted,reactive } from "vue";
+import { ref, computed, onMounted, reactive, watch } from "vue";
+import { useGlobalStore } from "@/stores/modules/global";
 
 const queryInfo = ref(0)
 
@@ -350,13 +351,15 @@ const pie = ref()
 const tempLine = ref()
 const pressureLine = ref()
 const dialog = reactive<any>({
-  visible: false,
-  title: ''
+	visible: false,
+	title: ''
 });
+const globalStore = useGlobalStore();
+const isDark = computed(() => globalStore.isDark);
 
 const handleSetting = () => {
-  dialog.title = "列表字段设置"
-  dialog.visible = true;
+	dialog.title = "列表字段设置"
+	dialog.visible = true;
 }
 
 const submitForm = () => {
@@ -364,7 +367,7 @@ const submitForm = () => {
 }
 
 const cancel = () => {
-  dialog.visible = false;
+	dialog.visible = false;
 }
 
 //chart 数据
@@ -524,7 +527,7 @@ const showPressure = () => {
 					}
 				},
 				axisLabel: {
-					color: '#666666',
+					color:  isDark.value ? '#fff' : "#666",
 					distance: 8,
 					fontSize: 10
 				},
@@ -532,7 +535,7 @@ const showPressure = () => {
 					offsetCenter: [0, 0],
 					valueAnimation: true,
 					formatter: '{value}',
-					color: 'black',
+					color:  isDark.value ? '#fff' : "#000",
 					fontSize: 30,
 				},
 				data: [
@@ -663,7 +666,7 @@ const showHumidity = () => {
 					}
 				},
 				axisLabel: {
-					color: '#666666',
+					color:  isDark.value ? '#fff' : "#666",
 					distance: 8,
 					fontSize: 10
 				},
@@ -671,7 +674,7 @@ const showHumidity = () => {
 					offsetCenter: [0, 0],
 					valueAnimation: true,
 					formatter: '{value}',
-					color: 'black',
+					color:  isDark.value ? '#fff' : "#000",
 					fontSize: 30,
 				},
 				data: [
@@ -732,7 +735,7 @@ const showWindSpeed = () => {
 					show: true,
 					offsetCenter: [0, '-0%'], // x, y，单位px
 					textStyle: {
-						color: 'black',
+						color: isDark.value ? '#fff' : "#000",
 						fontSize: 30
 					}
 				},
@@ -790,6 +793,7 @@ const showWindSpeed = () => {
 				axisLabel: {
 					fontSize: 10,
 					distance: 10,
+					color: isDark.value ? '#fff' : "#666",
 					formatter: function (value) {
 						if (value === 0) {
 							return '北';
@@ -821,7 +825,7 @@ const showWindSpeed = () => {
 					offsetCenter: [-12, 5],
 					valueAnimation: true,
 					formatter: '2',
-					color: 'black'
+					color: isDark.value ? '#fff' : "#000",
 
 					// 	fontSize: 10,
 				},
@@ -1160,7 +1164,7 @@ const showTemp = () => {
 					}
 				},
 				axisLabel: {
-					color: '#666666',
+					color:  isDark.value ? '#fff' : "#666",
 					distance: 8,
 					fontSize: 10
 				},
@@ -1168,7 +1172,7 @@ const showTemp = () => {
 					offsetCenter: [0, 0],
 					valueAnimation: true,
 					formatter: '{value}',
-					color: 'black',
+					color:  isDark.value ? '#fff' : "#000",
 					fontSize: 30,
 				},
 				data: [
@@ -1227,7 +1231,10 @@ const showTempLine = () => {
 		legend: {
 			data: ['气温', '相对湿度'],
 			// left: 10
-			top: 0
+			top: 0,
+			textStyle: {//图例文字的样式
+				color: isDark.value ? '#fff' : "#000",
+			}
 
 		},
 		// X轴
@@ -1416,6 +1423,16 @@ const showPressureLine = () => {
 	});
 }
 
+watch(isDark, () => {
+	showTemp()
+	showWind()
+	showWindSpeed()
+	showHumidity()
+	showPressure()
+	showTempLine()
+	showPressureLine()
+
+});
 
 onMounted(() => {
 	showTemp()
@@ -1459,6 +1476,9 @@ onMounted(() => {
 		border-radius: 10px;
 		padding: 10px;
 		background-color: #fff;
+		// 	background-color: var(--el-bg-color) !important;
+		// border: 1px solid var(--el-border-color-light);
+
 		// height: 100%;
 		// margin-bottom: 15px;
 
@@ -1479,7 +1499,7 @@ onMounted(() => {
 		.info_content {
 			height: 40px;
 			font-weight: bold;
-			color: #000;
+			// color: #000;
 			font-size: 26px;
 		}
 	}
@@ -1490,13 +1510,13 @@ onMounted(() => {
 	position: relative;
 
 	.icon {
-		color: #000;
+		// color: #000;
 		font-weight: bold;
 		position: absolute;
 
 		span {
 
-			color: #666;
+			// color: #666;
 			font-weight: normal;
 		}
 

src/views/analysis/dataSynthesis/index.vue

@@ -14,7 +14,7 @@
 				</el-form-item>
 				<el-form-item>
 					<div>
-						<el-button plain>查询</el-button>
+						<el-button type="primary">查询</el-button>
 						<el-button plain @click="resetForm(formRef)">重置</el-button>
 					</div>
 				</el-form-item>
@@ -23,7 +23,7 @@
 		<div class="main_list">
 			<el-row :gutter="15">
 				<el-col :span="24">
-					<div class="chart_item">
+					<div class="chart_item zhuti">
 						<div style="font-weight: bold;" class="item_title">
 							<span>气温 ( ℃ ) / 相对湿度 ( % ) / 本站气压 ( hPa )</span>
 						</div>
@@ -40,13 +40,15 @@
 <script setup lang="ts" name="dataSynthesis">
 import * as echarts from 'echarts';
 
-import { ref, reactive, onMounted } from "vue";
+import { ref, reactive, onMounted,computed,watch } from "vue";
 import { useRouter } from "vue-router";
 
-
+import { useGlobalStore } from "@/stores/modules/global";
 const formRef = ref()
 const data = ref()
 
+const globalStore = useGlobalStore();
+const isDark = computed(() => globalStore.isDark);
 
 const router = useRouter();
 const searchParam = reactive({
@@ -87,7 +89,10 @@ const showData = () => {
 		},
 
 		legend: {
-			data: ['气温', '相对湿度', '本站气压']
+			data: ['气温', '相对湿度', '本站气压'],
+			textStyle: {//图例文字的样式
+				color: isDark.value ? '#fff' : "#000",
+			}
 		},
 		xAxis: [
 			{
@@ -183,6 +188,12 @@ const showData = () => {
 		mychart.resize();
 	});
 }
+
+watch(isDark, () => {
+	showData()
+	
+
+});
 onMounted(() => {
 	showData()
 

src/views/analysis/featureCurves/index.vue

@@ -17,7 +17,7 @@
 				</el-form-item>
 				<el-form-item>
 					<div>
-						<el-button plain>查询</el-button>
+						<el-button type="primary">查询</el-button>
 						<el-button plain @click="resetForm(formRef)">重置</el-button>
 					</div>
 				</el-form-item>
@@ -32,7 +32,7 @@
 		<div class="main_list">
 			<el-row :gutter="15">
 				<el-col :xs="24" :sm="12" :md="8" :lg="8">
-					<div class="chart_item">
+					<div class="chart_item zhuti">
 						<div style="font-weight: bold;" class="item_title">
 							<span>2分钟平均风向 ( ° )/2分钟平均风速 ( m/s )</span>
 						</div>
@@ -42,7 +42,7 @@
 					</div>
 				</el-col>
 				<el-col :xs="24" :sm="12" :md="8" :lg="8">
-					<div class="chart_item">
+					<div class="chart_item zhuti">
 						<div style="font-weight: bold;" class="item_title">
 							<span>总辐射曝辐量 ( MJ/㎡ )</span>
 						</div>
@@ -52,7 +52,7 @@
 					</div>
 				</el-col>
 				<el-col :xs="24" :sm="12" :md="8" :lg="8">
-					<div class="chart_item">
+					<div class="chart_item zhuti">
 						<div style="font-weight: bold;" class="item_title">
 							<span>本站气压 ( hPa )</span>
 						</div>
@@ -64,7 +64,7 @@
 			</el-row>
 			<el-row :gutter="15">
 				<el-col :span="24">
-					<div class="chart_item">
+					<div class="chart_item zhuti">
 						<div style="font-weight: bold;" class="item_title">
 							<span>总辐射辐照度 ( W/㎡ )</span>
 						</div>

src/views/analysis/lightningArea/index.vue

@@ -14,7 +14,7 @@
 				</el-form-item>
 				<el-form-item>
 					<div>
-						<el-button plain>查询</el-button>
+						<el-button type="primary">查询</el-button>
 						<el-button plain @click="resetForm(formRef)">重置</el-button>
 					</div>
 				</el-form-item>
@@ -23,7 +23,7 @@
 		<div class="main_list">
 			<el-row :gutter="15">
 				<el-col :span="24">
-					<div class="chart_item">
+					<div class="chart_item zhuti">
 						<div style="font-weight: bold;" class="item_title">
 							<span>雷电区域分析</span>
 						</div>
@@ -40,8 +40,11 @@
 <script setup lang="ts" name="dataSynthesis">
 import * as echarts from 'echarts';
 
-import { ref, reactive, onMounted } from "vue";
+import { ref, reactive, onMounted,computed,watch } from "vue";
 import { useRouter } from "vue-router";
+import { useGlobalStore } from "@/stores/modules/global";
+const globalStore = useGlobalStore();
+const isDark = computed(() => globalStore.isDark);
 
 
 const formRef = ref()
@@ -84,7 +87,7 @@ const showData = () => {
             formatter: '{value}',
             textStyle: {
                 fontSize: 15,
-                color: '#000'
+                color: isDark.value ? '#fff' : "#000"
             }
         },
         nameGap: 5,
@@ -101,12 +104,12 @@ const showData = () => {
         splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
             show: true,
             areaStyle: { // 分隔区域的样式设置。
-                color: ['#fff', '#fff'],
+                color: [isDark.value ? '#000' : "#fff",isDark.value ? '#000' : "#fff"],
                 // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
             }
         },
     indicator: [
-      { name: '360°', max: 200,axisLabel: { show: true,formatter:'{value}km',color:'#000',showMinLabel: false, }, },
+      { name: '360°', max: 200,axisLabel: { show: true,formatter:'{value}km',color:isDark.value ? '#fff' : "#000",showMinLabel: false, }, },
       { name: '',max:200},
       { name: '315°',  },
       { name: '', },
@@ -149,10 +152,12 @@ const showData = () => {
 		mychart.resize();
 	});
 }
+
+watch(isDark, () => {
+	showData()
+});
 onMounted(() => {
 	showData()
-
-
 })
 
 </script>

src/views/analysis/rainfall/index.vue

@@ -18,7 +18,7 @@
 				</el-form-item>
 				<el-form-item>
 					<div>
-						<el-button plain>查询</el-button>
+						<el-button type="primary">查询</el-button>
 						<el-button plain @click="resetForm(formRef)">重置</el-button>
 					</div>
 				</el-form-item>
@@ -27,7 +27,7 @@
 		<div class="main_list">
 			<el-row :gutter="15">
 				<el-col :span="24">
-					<div class="chart_item">
+					<div class="chart_item zhuti">
 						<div style="font-weight: bold;" class="item_title">
 							<span v-if="searchParam.switch">日降水量（mm）</span>
 							<span v-else>小时累计降水量 (称重)(mm)</span>
@@ -45,8 +45,11 @@
 <script setup lang="ts" name="dataSynthesis">
 import * as echarts from 'echarts';
 
-import { ref, reactive, onMounted } from "vue";
+import { ref, reactive, onMounted,computed,watch } from "vue";
 import { useRouter } from "vue-router";
+// import { useGlobalStore } from "@/stores/modules/global";
+// const globalStore = useGlobalStore();
+// const isDark = computed(() => globalStore.isDark);
 
 
 const formRef = ref()
@@ -126,6 +129,12 @@ const showData = () => {
 		mychart.resize();
 	});
 }
+
+// watch(isDark, () => {
+// 	showData()
+	
+
+// });
 onMounted(() => {
 	showData()
 

src/views/analysis/windSpeed/index.vue

@@ -14,7 +14,7 @@
 				</el-form-item>
 				<el-form-item>
 					<div>
-						<el-button plain>查询</el-button>
+						<el-button type="primary">查询</el-button>
 						<el-button plain @click="resetForm(formRef)">重置</el-button>
 					</div>
 				</el-form-item>
@@ -23,7 +23,7 @@
 		<div class="main_list">
 			<el-row :gutter="15">
 				<el-col :span="24">
-					<div class="chart_item">
+					<div class="chart_item zhuti">
 						<div style="font-weight: bold;" class="item_title">
 							<span>风向风速玫瑰图</span>
 						</div>
@@ -40,8 +40,11 @@
 <script setup lang="ts" name="dataSynthesis">
 import * as echarts from 'echarts';
 
-import { ref, reactive, onMounted } from "vue";
+import { ref, reactive, onMounted,computed,watch } from "vue";
 import { useRouter } from "vue-router";
+import { useGlobalStore } from "@/stores/modules/global";
+const globalStore = useGlobalStore();
+const isDark = computed(() => globalStore.isDark);
 
 
 const formRef = ref()
@@ -76,6 +79,9 @@ const showData = () => {
 
 		legend: {
 			// data: ['Allocated Budget', 'Actual Spending']
+			textStyle: {//图例文字的样式
+				color: isDark.value ? '#fff' : "#000",
+			}
 		},
 		radar: {
 			shape: 'circle',
@@ -83,7 +89,7 @@ const showData = () => {
 				formatter: '{value}',
 				textStyle: {
 					fontSize: 15,
-					color: '#000'
+					color:  isDark.value ? '#fff' : "#000",
 				}
 			},
 			nameGap: 5,
@@ -100,12 +106,12 @@ const showData = () => {
 			splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
 				show: true,
 				areaStyle: { // 分隔区域的样式设置。
-					color: ['#fff', '#fff'],
+					color: [isDark.value ? '#000' : "#fff",isDark.value ? '#000' : "#fff"],
 					// 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
 				}
 			},
 			indicator: [
-				{ name: 'N', max: 21, axisLabel: { show: true, color: '#000' }, },
+				{ name: 'N', max: 21, axisLabel: { show: true, color:  isDark.value ? '#fff' : "#000" }, },
 				{ name: 'NNW', max: 21 },
 				{ name: 'NW°', max: 21 },
 				{ name: 'WNW', max: 21 },
@@ -152,10 +158,11 @@ const showData = () => {
 		mychart.resize();
 	});
 }
+watch(isDark, () => {
+	showData()
+});
 onMounted(() => {
 	showData()
-
-
 })
 
 </script>