zS/go-viee-fetch-Demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore：统一小标题css：

Browse Source 
font-family: 'CustomFont';
    font-style: italic;
    letter-spacing: 0.5px;
    color: #eee;
    text-shadow: 1px 3px 10px #000000;
    font-size: 16px;
This commit is contained in:
Free-sss 2025-09-01 16:57:25 +08:00
parent 35acd39545
commit 18f975bc4a
24 changed files with 220 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/packages/components/Charts/HazardousChemicalsSpace/AlarmListHaz/config.ts
View File

@ -37,7 +37,7 @@ export const option = {
fontSize: 12,
title: '近60分钟报警信息',
titleSize: 16,
titleColor: '#ffffff',
titleColor: '#eee',
fontWeight: 'normal',
fontStyle: 'italic',
paddingX: 50,

2
src/packages/components/Charts/HazardousChemicalsSpace/AlarmListHazC/config.ts
View File

@ -38,7 +38,7 @@ export const option = {
fontSize: 12,
title: '近60分钟报警信息',
titleSize: 16,
titleColor: '#ffffff',
titleColor: '#eee',
fontWeight: 'normal',
fontStyle: 'italic',
paddingX: 45,

5
src/packages/components/Charts/HazardousChemicalsSpace/MaxTrimHaz/config.ts
View File

@ -38,7 +38,7 @@ export const FontStyleObject = {
export const option = {
dataset: '危化品库场景数据看板',
fontSize: 38,
fontColor: '#ffffff',
fontColor: '#eee',
paddingX: 35,
paddingY: 6,
textAlign: 'start', // 水平对齐方式
@ -48,7 +48,8 @@ export const option = {
letterSpacing: 10,
fontFamily: 'CustomFont',
writingMode: 'horizontal-tb',
backgroundColor: '#00000000'
backgroundColor: '#00000000',
fontShadowColor: '#000000'
}

2
src/packages/components/Charts/HazardousChemicalsSpace/TopAlarmsHaz/config.ts
View File

@ -31,7 +31,7 @@ export const option = {
dataset: dataJson.source,
title: '未处置报警数TOP5',
titleColor: '#ffffff',
titleColor: '#eee',
titleSize: 16,
rankColor: '#5AA1AD',
nameColor: '#eeeeee',

4
src/packages/components/Charts/HazardousChemicalsSpace/index.ts
View File

@ -2,7 +2,7 @@ import { yushiVideoConfig } from './yushiVideoHaz/index'
import { MaxTrimConfig } from './MaxTrimHaz/index'
import { PieCenterConfig } from './PieCenterHaz/index'
import { LineDropdownConfig } from './LineDropdownHaz/index'
import { AlarmListConfig } from './AlarmListHaz/index'
// import { AlarmListConfig } from './AlarmListHaz/index'
import { LineGraph01 } from './LineGraph01Haz/index'
import { TopAlarmsConfig } from './TopAlarmsHaz/index'
import AlarmListHazCConfig from './AlarmListHazC'
@ -12,7 +12,7 @@ export default [
MaxTrimConfig,
PieCenterConfig,
LineDropdownConfig,
AlarmListConfig,
// AlarmListConfig,
LineGraph01,
TopAlarmsConfig,
AlarmListHazCConfig

13
src/packages/components/Charts/MyComponents/AlarmList/config.ts
View File

@ -37,14 +37,13 @@ export const option = {
itemHeight: 28,
fontSize: 12,
title: '近60分钟报警信息',
titleSize: 17,
titleColor: '#ffffff',
iconColor: '#00E5FF',
titleSize: 16,
titleColor: '#eee',
fontWeight: 'normal',
fontStyle: 'normal',
paddingX: 40,
paddingY: -30,
letterSpacing: 1,
fontStyle: 'italc',
paddingX: 50,
paddingY: -25,
letterSpacing: 0.5,
isShowButton: false
}

7
src/packages/components/Charts/MyComponents/AlarmList/index.vue
View File

@ -179,6 +179,13 @@ onUnmounted(() => {
display: flex;
align-items: center;
padding: 0 20px 0 20px;
font-family: 'CustomFont';
font-style: italic;
letter-spacing: 0.5px;
color: #eee;
text-shadow: 1px 3px 10px #000000;
font-size: 16px;
}
}

8
src/packages/components/Charts/MyComponents/DeviceStatus/config.ts
View File

@ -14,8 +14,8 @@ export const option = {
itemHeight: 28,
fontSize: 11,
title: '设备实时在线概况',
titleSize: 17,
titleColor: '#ffffff',
titleSize: 16,
titleColor: '#eee',
iconColor: '#00E5FF',
onlineRate: 75,
onlineDevice: 23,
@ -27,8 +27,8 @@ export const option = {
progressBgColor: 'rgba(0, 0, 0, 0.1)',
progressTextColor: '#DDE3E9',
paddingX: 60,
paddingY: -4,
letterSpacing: 1
paddingY: -1,
letterSpacing: 0.5
}
export default class Config extends PublicConfigClass implements CreateComponentType {

9
src/packages/components/Charts/MyComponents/DeviceStatus/index.vue
View File

@ -351,4 +351,13 @@ SmallBorder {
}
}
}
.title-text {
font-family: 'CustomFont';
font-style: italic;
letter-spacing: 0.5px;
color: #eee;
text-shadow: 1px 3px 10px #000000;
font-size: 16px;
}
</style>

23
src/packages/components/Charts/MyComponents/LineDropdown/index.vue
View File

@ -468,26 +468,13 @@ const handleDropdownChange = () => {
height: 45px;
line-height: 45px;
left: 80px;
font-size: 16px;
font-weight: bold;
color: #eee;
font-style: italic;
text-shadow: 0 0 10px #00E5FF;
white-space: nowrap;
}
.header-title{
position: absolute;
top: 0;
height: 45px;
line-height: 45px;
left: 80px;
font-size: 16px;
font-weight: bold;
color: #eee;
font-family: 'CustomFont';
font-style: italic;
text-shadow: 0 0 10px #00E5FF;
white-space: nowrap;
letter-spacing: 0.5px;
color: #eee;
text-shadow: 1px 3px 10px #000000;
font-size: 16px;
}
.svg {

16
src/packages/components/Charts/MyComponents/LineGraph01/index.vue
View File

@ -641,13 +641,15 @@ onUnmounted(() => {
.buttonContent span {
font-size: 15px;
color: #ffffff;
letter-spacing: 2px;
font-weight: 500;
text-shadow: -4px -4px 10px #3B8ED4;
padding: 0;
margin: 0;
padding-left: 5px;
margin: -5px;
font-family: 'CustomFont';
font-style: italic;
letter-spacing: 0.5px;
color: #eee;
text-shadow: 1px 3px 10px #000000;
font-size: 16px;
}
</style>

6
src/packages/components/Charts/MyComponents/LineGraph02/config.ts
View File

@ -102,9 +102,9 @@ export const option = {
const configSet = {
titlefontWeight: 'normal',
titlefontSize: 17,
titlefontStyle: 'normal',
titlecolor: '#ffffff',
titlefontSize: 16,
titlefontStyle: 'italic',
titlecolor: '#eee',
titlePaddingX: 0,
titlePaddingY: 0,
isShowButton: true

12
src/packages/components/Charts/MyComponents/LineGraph02/index.vue
View File

@ -420,11 +420,11 @@ onUnmounted(() => {
.buttonContent span {
font-size: 17px;
color: #ffffff;
letter-spacing: 1px;
font-weight: normal;
text-shadow: -4px -4px 10px #3B8ED4;
padding: 0;
font-family: 'CustomFont';
font-style: italic;
letter-spacing: 0.5px;
color: #eee;
text-shadow: 1px 3px 10px #000000;
font-size: 16px;
}
</style>

5
src/packages/components/Charts/MyComponents/MaxTrim/config.ts
View File

@ -37,12 +37,13 @@ export const FontStyleObject = {
export const option = {
dataset: '储罐区监控',
fontSize: 38,
fontColor: '#ffffff',
fontColor: '#eee',
paddingX: 35,
paddingY: 6,
textAlign: 'start', // 水平对齐方式
fontWeight: 'bold',
fontWeight: 'normal',
fontStyle: 'italic',
fontShadowColor:'#000000',
// 字间距
letterSpacing: 10,
writingMode: 'horizontal-tb',

1
src/packages/components/Charts/MyComponents/MaxTrim/index.vue
View File

@ -334,6 +334,7 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
font-style: v-bind('fontStyle');
background-color: v-bind('backgroundColor');
text-shadow: 0px 4px 3px v-bind('fontShadowColor');
font-family: 'CustomFont';
}
.go-text-box .svg {

4
src/packages/components/Charts/MyComponents/ParkingScene/config.ts
View File

@ -6,8 +6,8 @@ import dataJson from './data.json'
export const option = {
dataset: dataJson.source,
title: '场景分布概况',
titleColor: '#ffffff',
titleSize: 20,
titleColor: '#eee',
titleSize: 16,
linkColor: '#00E5FF',
linkText: '查看更多>>',
sceneNameColor: '#ccc',

17
src/packages/components/Charts/MyComponents/ParkingScene/index.vue
View File

@ -255,7 +255,8 @@ const option = computed(() => props.chartConfig.option)
}
.scene-item:nth-child(n+2) {
margin-top: 7px;;
margin-top: 7px;
;
}
.scene-header {
@ -354,16 +355,18 @@ const option = computed(() => props.chartConfig.option)
.header-title {
position: absolute;
top: 0;
top: 3px;
height: 45px;
line-height: 45px;
left: 80px;
font-size: 16px;
font-weight: bold;
color: #eee;
font-style: italic;
text-shadow: 0 0 10px #00E5FF;
white-space: nowrap;
font-family: 'CustomFont';
font-style: italic;
letter-spacing: 0.5px;
color: #eee;
text-shadow: 1px 3px 10px #000000;
font-size: 16px;
}
.svg {

11
src/packages/components/Charts/MyComponents/PieCenter/index.vue
View File

@ -403,12 +403,13 @@ onMounted(() => {
height: 45px;
line-height: 45px;
left: 80px;
font-size: 16px;
font-weight: bold;
color: #eee;
font-style: italic;
text-shadow: 0 0 10px #00E5FF;
white-space: nowrap;
font-family: 'CustomFont';
font-style: italic;
letter-spacing: 0.5px;
color: #eee;
text-shadow: 1px 3px 10px #000000;
font-size: 16px;
}
.svg {

4
src/packages/components/Charts/MyComponents/SceneDistribution/config.ts
View File

@ -6,8 +6,8 @@ import dataJson from './data.json'
export const option = {
dataset: dataJson.source,
title: '场景分布概况',
titleColor: '#E6F7FF',
titleSize: 18,
titleColor: '#eee',
titleSize: 16,
labelColor: '#E6F7FF',
labelSize: 16,
valueColor: '#ffffff',

24
src/packages/components/Charts/MyComponents/SceneDistribution/index.vue
View File

@ -202,13 +202,16 @@
<div class="content">
<div v-for="(item, index) in option.dataset" :key="index" class="scene-item">
<div class="item-title" :style="{ color: option.titleColor, fontSize: option.titleSize + 'px' }">{{ item.title }}</div>
<div class="item-label" :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">{{ item.label }}</div>
<div class="item-title" :style="{ color: option.titleColor, fontSize: option.titleSize + 'px' }">{{ item.title
}}</div>
<div class="item-label" :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">{{ item.label
}}</div>
<div class="cube-container">
<img :src="getImageUrl(item.image)" class="cube-image" />
</div>
<div class="value-container">
<span class="item-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px', }">{{ item.value }}</span>
<span class="item-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px', }">{{
item.value }}</span>
</div>
</div>
</div>
@ -371,12 +374,13 @@ const getImageUrl = (name: string) => {
height: 45px;
line-height: 45px;
left: 80px;
font-size: 16px;
font-weight: bold;
color: #eee;
font-style: italic;
text-shadow: 0 0 10px #00E5FF;
white-space: nowrap;
font-family: 'CustomFont';
font-style: italic;
letter-spacing: 0.5px;
color: #eee;
text-shadow: 1px 3px 10px #000000;
font-size: 16px;
}
.svg {
@ -385,6 +389,4 @@ const getImageUrl = (name: string) => {
}
</style>
<style lang="scss" scoped>
</style>
<style lang="scss" scoped></style>

6
src/packages/components/Charts/MyComponents/TopAlarms/config.ts
View File

@ -5,8 +5,8 @@ import dataJson from './data.json'
export const option = {
dataset: dataJson.source,
title: '未处置报警数TOP5',
titleColor: '#ffffff',
titleSize: 17,
titleColor: '#eee',
titleSize: 16,
rankColor: '#5AA1AD',
nameColor: '#eeeeee',
valueColor: '#eeeeee',
@ -15,7 +15,7 @@ export const option = {
dropdownOptions: ['当日', '当月', '当年'],
dropdownDefault: '当日',
iconColor: '#00E5FF',
letterSpacing: 1,
letterSpacing: 0.5,
paddingX: 40,
paddingY: -5,
isShowButton: false

8
src/packages/components/Charts/MyComponents/TopAlarms/index.vue
View File

@ -127,6 +127,14 @@ const handleSelect = (key: string) => {
padding: 0 20px 0 20px;
margin-left: 0px;
clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
font-family: 'CustomFont';
font-style: italic;
letter-spacing: 0.5px;
color: #eee;
text-shadow: 1px 3px 10px #000000;
font-size: 16px;
}
}

8
src/packages/components/Charts/MyComponents/WorkshopScene/config.ts
View File

@ -24,14 +24,14 @@ export const FontStyleObject = {
export const option = {
dataset: dataJson.source,
title: '场景分布概况',
titleColor: '#ffffff',
titleSize: 20,
titleColor: '#eee',
titleSize: 16,
iconColor: '#00E5FF',
fontWeight: 'normal',
fontStyle: 'normal',
fontStyle: 'italic',
paddingX: 10,
paddingY: -12,
letterSpacing: 1,
letterSpacing: 0.5,
isShowButton: false,
linkColor: '#00E5FF',
linkText: '',

36
src/packages/components/Charts/MyComponents/WorkshopScene/index.vue
View File

@ -19,36 +19,42 @@
</div>
<div class="content">
<div class="scene-row" :style="{ backgroundImage: `url(${backgrounds[0]})` }">
<div class="scene-name-1" :style="{ color: option.sceneNameColor, fontSize: option.sceneNameSize + 'px' }">危化品库</div>
<div class="scene-name-1" :style="{ color: option.sceneNameColor, fontSize: option.sceneNameSize + 'px' }">
危化品库</div>
<div class="metrics-container">
<div class="metric-top-1">
<div class="metric-label">
<span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">场景总数</span>
</div>
<div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">262</div>
<div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">262
</div>
</div>
<div class="metric-top-2">
<div class="metric-label">
<span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">智控场景</span>
</div>
<div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">6852</div>
<div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">6852
</div>
</div>
</div>
</div>
<div class="scene-row reverse" :style="{ backgroundImage: `url(${backgrounds[1]})` }">
<div class="scene-name-2" :style="{ color: option.sceneNameColor, fontSize: option.sceneNameSize + 'px' }">危废品库</div>
<div class="scene-name-2" :style="{ color: option.sceneNameColor, fontSize: option.sceneNameSize + 'px' }">
危废品库</div>
<div class="metrics-container">
<div class="metric-bottom-1">
<div class="metric-label">
<span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">智控场景</span>
</div>
<div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">6852</div>
<div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">6852
</div>
</div>
<div class="metric-bottom-2">
<div class="metric-label">
<span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">场景总数</span>
</div>
<div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">262</div>
<div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">262
</div>
</div>
</div>
</div>
@ -107,6 +113,13 @@ const option = computed(() => props.chartConfig.option)
display: flex;
align-items: center;
padding: 0 20px 0 20px;
font-family: 'CustomFont';
font-style: italic;
letter-spacing: 0.5px;
color: #eee;
text-shadow: 1px 3px 10px #000000;
font-size: 16px;
}
}
@ -196,7 +209,8 @@ const option = computed(() => props.chartConfig.option)
margin: 0 30px;
position: relative;
&::before, &::after {
&::before,
&::after {
content: '';
position: absolute;
left: -2px;
@ -205,9 +219,11 @@ const option = computed(() => props.chartConfig.option)
background-color: #00E5FF;
border-radius: 50%;
}
&::before {
top: -1px;
}
&::after {
bottom: -1px;
}
@ -241,23 +257,25 @@ const option = computed(() => props.chartConfig.option)
left: 9px; // Visually center the value under the text
}
}
.metric-top-1 {
position: relative;
left: -85px;
}
.metric-top-2 {
position: relative;
left: -30px;
}
.metric-bottom-1 {
position: relative;
left: 15px;
}
.metric-bottom-2 {
position: relative;
left: 70px;
}
}
</style>