微调颜色

This commit is contained in:
sjl
2025-03-17 15:55:30 +08:00
parent 630eb48d28
commit 5f68071c77
25 changed files with 46 additions and 40 deletions

View File

@@ -144,8 +144,8 @@ export namespace CheckData {
export enum ButtonColorEnum {
INFO = '#909399',
LOADING = '#003078',
SUCCESS = '#67c23a',
LOADING = 'var(--el-color-primary)',
SUCCESS = '#91cc75',
WARNING = '#e6a23c',
DANGER = '#f56c6c',
}

View File

@@ -9,7 +9,6 @@ export const HOME_URL: string = "/home/index";
export const LOGIN_URL: string = "/login";
// 默认主题颜色
//export const DEFAULT_PRIMARY: string = "#003078";
export const DEFAULT_PRIMARY: string = "#526ADE";
// 路由白名单地址(本地存在的路由 staticRouter.ts 中)
@@ -20,3 +19,5 @@ export const AMAP_MAP_KEY: string = "";
// 百度地图 key
export const BAIDU_MAP_KEY: string = "";

View File

@@ -27,6 +27,7 @@ export const useTheme = () => {
// 修改主题颜色
const changePrimary = (val: string | null) => {
if (!val) {
val = DEFAULT_PRIMARY;
ElMessage({ type: "success", message: `主题颜色已重置为 ${DEFAULT_PRIMARY}` });
@@ -42,8 +43,7 @@ export const useTheme = () => {
document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, primaryColor);
}
globalStore.setGlobalState("primary", val);
};
}
// 灰色和弱色切换
const changeGreyOrWeak = (type: Theme.GreyOrWeakType, value: boolean) => {
const body = document.body as HTMLElement;

View File

@@ -1,6 +1,6 @@
import { defineStore } from "pinia";
import { GlobalState } from "@/stores/interface";
import { DEFAULT_PRIMARY } from "@/config";
import { DEFAULT_PRIMARY} from "@/config";
import piniaPersistConfig from "@/stores/helper/persist";
import {GLOBAL_STORE_KEY} from "@/stores/constant";
@@ -42,6 +42,7 @@ export const useGlobalStore = defineStore({
tabsIcon: true,
// 页脚
footer: false
}),
getters: {},
actions: {

View File

@@ -37,6 +37,7 @@ export function rgbToHex(r: any, g: any, b: any) {
* @returns {String} 返回处理后的颜色值
*/
export function getDarkColor(color: string, level: number) {
let reg = /^\#?[0-9A-Fa-f]{6}$/;
if (!reg.test(color)) return ElMessage.warning("输入错误的hex颜色值");
let rgb = hexToRgb(color);
@@ -51,6 +52,7 @@ export function getDarkColor(color: string, level: number) {
* @returns {String} 返回处理后的颜色值
*/
export function getLightColor(color: string, level: number) {
let reg = /^\#?[0-9A-Fa-f]{6}$/;
if (!reg.test(color)) return ElMessage.warning("输入错误的hex颜色值");
let rgb = hexToRgb(color);

View File

@@ -7,7 +7,7 @@
<div>{{ outputDsc }}</div>
<div>
<span style=" font-size: 18px;font-weight: 600;">
设备已合格 <span style="color: #67C23A">{{ qualified }}</span> / <span style="color: green">{{ total }}</span>
设备已合格 <span style="color: #91cc75">{{ qualified }}</span> / <span style="color: green">{{ total }}</span>
</span>
<!-- <el-button type="primary" loading

View File

@@ -38,13 +38,13 @@
<!-- <el-button type="primary" loading v-if="activeIndex > 0 && activeIndex < activeTotalNum">合格92项/共103项</el-button>
<el-button type="primary" v-if="activeIndex >= activeTotalNum" disabled>合格92项/共103项</el-button> -->
<span style=" font-size: 18px;font-weight: 600;">
数据已合格 <span style="color: #67C23A">{{ qualified }}</span> / <span style="color: green">{{ 103 }}</span>
数据已合格 <span style="color: #91cc75">{{ qualified }}</span> / <span style="color: green">{{ 103 }}</span>
</span>
</div>
<div class="dialog-content">
<el-table :data="tableData" :cell-class-name="tableCell" row-key="id" height="450px"
:header-cell-style="{ background: '#003078', color: '#eee', textAlign: 'center' }" style="width: 100%"
:header-cell-style="{ background: 'var(--el-color-primary)', color: '#eee', textAlign: 'center' }" style="width: 100%"
border>
<el-table-column fixed prop="scriptItemName" label="检测项目" width="210px" />
<el-table-column label="被检通道1" :min-width="minwidth" align="center">

View File

@@ -43,7 +43,7 @@
v-model="scriptSwitch"
class="ml-2"
inline-prompt
style="--el-switch-on-color: #003078; --el-switch-off-color: #5a79a9"
style="--el-switch-on-color: var(--el-color-primary); --el-switch-off-color: #5a79a9"
active-text="不合格测试项"
inactive-text="全部测试项"
/> -->

View File

@@ -835,7 +835,7 @@ defineExpose({
<!--.el-popover.popover-class {-->
<!-- .el-popover__title {-->
<!-- color: #fff;-->
<!-- background-color: #003078 !important;-->
<!-- background-color: var(--el-color-primary) !important;-->
<!-- }-->
<!--}-->
<!--</style>-->

View File

@@ -6,7 +6,7 @@
<div>{{ outputDsc }}</div>
<div>
<span style=" font-size: 18px;font-weight: 600;">
设备已合格 <span style="color: #67C23A">{{ qualified }}</span> / <span style="color: green">{{ total }}</span>
设备已合格 <span style="color: #91cc75">{{ qualified }}</span> / <span style="color: green">{{ total }}</span>
</span>
<!-- <el-button type="primary" loading

View File

@@ -27,7 +27,7 @@
<div class="tabs-title ">
<el-button type="primary" :icon="Download" >报告下载</el-button>
<span style=" font-size: 18px;font-weight: 600;">
已生成 <span style="color: #67C23A">2</span> / <span style="color: green">3</span>
已生成 <span style="color: #91cc75">2</span> / <span style="color: green">3</span>
</span>
</div>

View File

@@ -1,7 +1,7 @@
<template>
<el-table
:data="tableData"
:row-class-name="tableRowClassName" row-key="id" height="300px" :header-cell-style="{ background: '#003078', color: '#eee', textAlign: 'center' } " style="width: 100%" border v-on:cell-click="handleClick"
:row-class-name="tableRowClassName" row-key="id" height="300px" :header-cell-style="{ background: 'var(--el-color-primary)', color: '#eee', textAlign: 'center' } " style="width: 100%" border v-on:cell-click="handleClick"
>
<el-table-column prop="date" label="Date" width="180" />
<el-table-column prop="name" label="Name" width="180" />

View File

@@ -75,7 +75,7 @@
<div class="dialog-content">
<el-table :data="checkResultView" row-key="scriptType" height="450px"
:header-cell-style="{ background: '#003078', color: '#eee', textAlign: 'center' } " style="width: 100%"
:header-cell-style="{ background: 'var(--el-color-primary)', color: '#eee', textAlign: 'center' } " style="width: 100%"
border>
<el-table-column fixed prop="scriptName" label="检测项目" width="150px" align="center">
</el-table-column>
@@ -169,6 +169,7 @@ import {useCheckStore} from "@/stores/modules/check";
import {ElMessage, ElMessageBox} from "element-plus";
import {getBigTestItem} from "@/api/check/test";
const checkStore = useCheckStore()
// 最大通道数
@@ -196,7 +197,7 @@ const emit = defineEmits(['update:testStatus', 'update:webMsgSend', 'sendPause',
// 用来保存测试项进度抽屉是否打开
const drawer = ref(false)
// 进度条颜色
const customColors = [{color: "#67c23a", percentage: 100}]
const customColors = [{color: "#91cc75", percentage: 100}]
// 检测脚本数据
let scriptData: CheckData.ScriptItem[] = []
// 用来保存被检设备
@@ -1424,6 +1425,7 @@ const secondToTime = (second: number) => {
}
onBeforeUnmount(() => {
if (timer) {
clearInterval(timer)
}
@@ -1480,7 +1482,7 @@ onBeforeUnmount(() => {
display: flex;
align-items: center;
color: #67c23a;;
color: #91cc75;
width: 28%;
margin-right: 0px;
text-align: left;
@@ -1514,7 +1516,7 @@ onBeforeUnmount(() => {
.drawer-container {
:deep(header.el-drawer__header) {
color: #fff !important;
background-color: #003078 !important;
background-color: var(--el-color-primary) !important;
.el-drawer__close-btn svg:hover {
color: #ccc !important;
@@ -1541,7 +1543,7 @@ onBeforeUnmount(() => {
//:deep(.el-drawer .el-drawer__title){
// background-color: #003078 !important;
// background-color: var(--el-color-primary) !important;
//}
</style>

View File

@@ -5,7 +5,7 @@
<div class="right-title" >
<span v-if="activeIndex <= 1"> </span>
<span v-if="activeIndex > 1" class="time-text">
标准时间: <span style="color: #003078">{{ gpsTime }}</span>
标准时间: <span style="color: var(--el-color-primary)">{{ gpsTime }}</span>
</span>
<div class="error-dsc">
<div class="green-div"></div>
@@ -52,7 +52,7 @@
<!-- <span v-if="activeIndex <= 1"> </span>
<span v-if="activeIndex > 1" style=" font-size: 18px;font-weight: 600;">
标准时间: <span style="color: #003078">{{ gpsTime }}</span>
标准时间: <span style="color: var(--el-color-primary)">{{ gpsTime }}</span>
</span>
<div class="error-dsc">
<div class="green-div"></div>
@@ -423,7 +423,7 @@ watch(ts, function (newValue, oldValue) {
}
.right-title .gps-time {
color: #003078;
color: var(--el-color-primary);
}
.error-dsc {
@@ -440,7 +440,7 @@ watch(ts, function (newValue, oldValue) {
}
.error-dsc .green-div {
background-color: #67C23A;
background-color: #91cc75;
}
.error-dsc .red-div {

View File

@@ -2,7 +2,7 @@
height: 100%;
min-height: 550px;
// background-color: #eeeeee;
background-color: #003078;
background-color: var(--el-color-primary);
background-image: url("@/assets/images/login_bg.svg");
background-size: 100% 100%;
background-size: cover;

View File

@@ -48,7 +48,7 @@
:data="tableData"
:header-cell-style="{
textAlign: 'center',
backgroundColor: '#003078',
backgroundColor: 'var(--el-color-primary)',
color: '#fff'
}"
stripe
@@ -598,7 +598,7 @@ defineExpose({
width: 45%;
}
.theFirst {
background-color: #003078;
background-color: var(--el-color-primary);
color: #fff;
width: 20px !important;
}

View File

@@ -31,7 +31,7 @@
<!-- <div class="formBut">-->
<el-button type="primary" :icon="Select" @click="start()" :disabled="connectDisabeld">通讯校验</el-button>
<el-button v-if="!connectDisabeld" type="text" style="color: #303133" disabled>源未连接</el-button>
<el-button v-else type="text" style="color: #67c23a" disabled>源连接成功</el-button>
<el-button v-else type="text" style="color: #91cc75" disabled>源连接成功</el-button>
<!-- </div>-->
</el-form-item>
</el-form>

View File

@@ -69,7 +69,7 @@ interface SpanMethodProps {
const rowClass = ({ row, column, rowIndex, columnIndex }: { row: any; column: any; rowIndex: number; columnIndex: number }): CSSProperties => {
let res: CSSProperties = {
textAlign: 'center' as CSSProperties['textAlign'],
backgroundColor: '#003078',
backgroundColor: 'var(--el-color-primary)',
color: '#fff'
}
if (rowIndex === 1) {

View File

@@ -5,7 +5,7 @@
</div>
<div class="table-container">
<el-table :data="tableData"
:header-cell-style="{ textAlign: 'center',backgroundColor: '#003078',color: '#fff' } "
:header-cell-style="{ textAlign: 'center',backgroundColor: 'var(--el-color-primary)',color: '#fff' } "
:cell-style="{ textAlign: 'center' }"
style="width: 100%"
:style="{ height: '400px',maxHeight: '400px',overflow:'hidden'}"

View File

@@ -4,7 +4,7 @@
:data="tableData"
:header-cell-style="{
textAlign: 'center',
backgroundColor: '#003078',
backgroundColor: 'var(--el-color-primary)',
color: '#fff'
}"
stripe

View File

@@ -8,7 +8,7 @@
:data="tableData"
:header-cell-style="{
textAlign: 'center',
backgroundColor: '#003078',
backgroundColor: 'var(--el-color-primary)',
color: '#fff'
}"
stripe

View File

@@ -31,7 +31,7 @@
:show-header="false"
:span-method="arraySpanMethod"
:cell-style="tableStyle.cellStyle"
:header-cell-style="{ textAlign: 'center', backgroundColor: '#003078', color: '#fff' }"
:header-cell-style="{ textAlign: 'center', backgroundColor: 'var(--el-color-primary)', color: '#fff' }"
@cell-click="handleRowClick"
:key="key"
>

View File

@@ -54,7 +54,7 @@
:data="tableData"
:header-cell-style="{
textAlign: 'center',
backgroundColor: '#003078',
backgroundColor: 'var(--el-color-primary)',
color: '#fff'
}"
stripe
@@ -528,7 +528,7 @@ onMounted(() => {
width: 45%;
}
.theFirst {
background-color: #003078;
background-color: var(--el-color-primary);
color: #fff;
width: 20px !important;
}

View File

@@ -90,7 +90,7 @@
size="small"
:header-cell-style="{
textAlign: 'center',
backgroundColor: '#003078',
backgroundColor: 'var(--el-color-primary)',
color: '#fff'
}"
stripe
@@ -111,7 +111,7 @@
size="small"
:header-cell-style="{
textAlign: 'center',
backgroundColor: '#003078',
backgroundColor: 'var(--el-color-primary)',
color: '#fff'
}"
stripe
@@ -134,7 +134,7 @@
size="small"
:header-cell-style="{
textAlign: 'center',
backgroundColor: '#003078',
backgroundColor: 'var(--el-color-primary)',
color: '#fff'
}"
stripe
@@ -155,7 +155,7 @@
size="small"
:header-cell-style="{
textAlign: 'center',
backgroundColor: '#003078',
backgroundColor: 'var(--el-color-primary)',
color: '#fff'
}"
stripe
@@ -178,7 +178,7 @@
:data="setValue_TableData"
:header-cell-style="{
textAlign: 'center',
backgroundColor: '#003078',
backgroundColor: 'var(--el-color-primary)',
color: '#fff'
}"
stripe

View File

@@ -24,7 +24,7 @@
class="custom-tree-node"
style="display: flex; align-items: center"
>
<CircleCheck v-if="data.isChildNode && data.scriptIdx < currentIndex" style="width:18px;height: 18px;margin-right:8px;color:#67C23A;"/>
<CircleCheck v-if="data.isChildNode && data.scriptIdx < currentIndex" style="width:18px;height: 18px;margin-right:8px;color:#91cc75;"/>
<svg-icon v-if="data.isChildNode && data.scriptIdx === currentIndex" name="loading" spin ></svg-icon>
<span>{{ node.label }}</span>