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, fontSize: 12,
title: '近60分钟报警信息', title: '近60分钟报警信息',
titleSize: 16, titleSize: 16,
titleColor: '#ffffff', titleColor: '#eee',
fontWeight: 'normal', fontWeight: 'normal',
fontStyle: 'italic', fontStyle: 'italic',
paddingX: 50, paddingX: 50,

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

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

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

@ -38,7 +38,7 @@ export const FontStyleObject = {
export const option = { export const option = {
dataset: '危化品库场景数据看板', dataset: '危化品库场景数据看板',
fontSize: 38, fontSize: 38,
fontColor: '#ffffff', fontColor: '#eee',
paddingX: 35, paddingX: 35,
paddingY: 6, paddingY: 6,
textAlign: 'start', // 水平对齐方式 textAlign: 'start', // 水平对齐方式
@ -48,7 +48,8 @@ export const option = {
letterSpacing: 10, letterSpacing: 10,
fontFamily: 'CustomFont', fontFamily: 'CustomFont',
writingMode: 'horizontal-tb', 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, dataset: dataJson.source,
title: '未处置报警数TOP5', title: '未处置报警数TOP5',
titleColor: '#ffffff', titleColor: '#eee',
titleSize: 16, titleSize: 16,
rankColor: '#5AA1AD', rankColor: '#5AA1AD',
nameColor: '#eeeeee', nameColor: '#eeeeee',

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

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

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

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

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

@ -179,6 +179,13 @@ onUnmounted(() => {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 20px 0 20px; 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, itemHeight: 28,
fontSize: 11, fontSize: 11,
title: '设备实时在线概况', title: '设备实时在线概况',
titleSize: 17, titleSize: 16,
titleColor: '#ffffff', titleColor: '#eee',
iconColor: '#00E5FF', iconColor: '#00E5FF',
onlineRate: 75, onlineRate: 75,
onlineDevice: 23, onlineDevice: 23,
@ -27,8 +27,8 @@ export const option = {
progressBgColor: 'rgba(0, 0, 0, 0.1)', progressBgColor: 'rgba(0, 0, 0, 0.1)',
progressTextColor: '#DDE3E9', progressTextColor: '#DDE3E9',
paddingX: 60, paddingX: 60,
paddingY: -4, paddingY: -1,
letterSpacing: 1 letterSpacing: 0.5
} }
export default class Config extends PublicConfigClass implements CreateComponentType { 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> </style>

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

@ -276,42 +276,42 @@ const handleDropdownChange = () => {
/* 添加边框样式到父容器 */ /* 添加边框样式到父容器 */
border-radius: 8px; border-radius: 8px;
padding: 1px; padding: 1px;
background: linear-gradient(to bottom, background: linear-gradient(to bottom,
rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 0%,
rgba(200, 200, 200, 0.6) 25%, rgba(200, 200, 200, 0.6) 25%,
rgba(150, 150, 150, 0.5) 50%, rgba(150, 150, 150, 0.5) 50%,
rgba(100, 100, 100, 0.4) 75%, rgba(100, 100, 100, 0.4) 75%,
rgba(60, 60, 60, 0.3) 100%); rgba(60, 60, 60, 0.3) 100%);
transition: all 0.3s ease; transition: all 0.3s ease;
} }
/* hover状态的彩色渐变边框 */ /* hover状态的彩色渐变边框 */
.dropdown-container:hover { .dropdown-container:hover {
background: linear-gradient(to bottom, background: linear-gradient(to bottom,
rgba(58, 160, 255, 1) 0%, rgba(58, 160, 255, 1) 0%,
rgba(98, 255, 198, 0.8) 25%, rgba(98, 255, 198, 0.8) 25%,
rgba(54, 110, 255, 1) 50%, rgba(54, 110, 255, 1) 50%,
rgba(28, 234, 160, 0.8) 75%, rgba(28, 234, 160, 0.8) 75%,
rgba(58, 160, 255, 1) 100%); rgba(58, 160, 255, 1) 100%);
} }
/* focus状态的增强彩色渐变边框 */ /* focus状态的增强彩色渐变边框 */
.dropdown-container:focus-within { .dropdown-container:focus-within {
background: linear-gradient(to bottom, background: linear-gradient(to bottom,
rgba(58, 160, 255, 1) 0%, rgba(58, 160, 255, 1) 0%,
rgba(98, 255, 198, 1) 25%, rgba(98, 255, 198, 1) 25%,
rgba(54, 110, 255, 1) 50%, rgba(54, 110, 255, 1) 50%,
rgba(28, 234, 160, 1) 75%, rgba(28, 234, 160, 1) 75%,
rgba(58, 160, 255, 1) 100%); rgba(58, 160, 255, 1) 100%);
} }
.custom-dropdown1 { .custom-dropdown1 {
/* 渐变背景 */ /* 渐变背景 */
background: linear-gradient(135deg, background: linear-gradient(135deg,
rgba(25, 35, 45, 0.95) 0%, rgba(25, 35, 45, 0.95) 0%,
rgba(15, 25, 35, 0.95) 50%, rgba(15, 25, 35, 0.95) 50%,
rgba(35, 45, 55, 0.95) 100%); rgba(35, 45, 55, 0.95) 100%);
/* 移除边框，因为已经移到父容器 */ /* 移除边框，因为已经移到父容器 */
border: none; border: none;
border-radius: 7px; border-radius: 7px;
@ -335,10 +335,10 @@ const handleDropdownChange = () => {
box-shadow: 0 6px 20px rgba(58, 160, 255, 0.2); box-shadow: 0 6px 20px rgba(58, 160, 255, 0.2);
transform: translateY(-1px); transform: translateY(-1px);
/* 增强背景渐变 */ /* 增强背景渐变 */
background: linear-gradient(135deg, background: linear-gradient(135deg,
rgba(35, 45, 55, 0.95) 0%, rgba(35, 45, 55, 0.95) 0%,
rgba(25, 35, 45, 0.95) 50%, rgba(25, 35, 45, 0.95) 50%,
rgba(45, 55, 65, 0.95) 100%); rgba(45, 55, 65, 0.95) 100%);
} }
.custom-dropdown1:focus { .custom-dropdown1:focus {
@ -357,7 +357,7 @@ const handleDropdownChange = () => {
border: none; border: none;
transition: all 0.2s ease; transition: all 0.2s ease;
cursor: pointer; cursor: pointer;
/* 添加细微的边框分隔 */ /* 添加细微的边框分隔 */
border-bottom: 1px solid rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.05);
} }
@ -408,7 +408,7 @@ const handleDropdownChange = () => {
transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg);
} }
.custom-dropdown1:focus + .dropdown-arrow { .custom-dropdown1:focus+.dropdown-arrow {
transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg);
color: rgba(58, 160, 255, 1); color: rgba(58, 160, 255, 1);
text-shadow: 0 0 8px rgba(58, 160, 255, 0.5); text-shadow: 0 0 8px rgba(58, 160, 255, 0.5);
@ -462,32 +462,19 @@ const handleDropdownChange = () => {
} }
} }
.header-title{ .header-title {
position: absolute; position: absolute;
top: 0; top: 0;
height: 45px; height: 45px;
line-height: 45px; line-height: 45px;
left: 80px; left: 80px;
font-size: 16px; white-space: nowrap;
font-weight: bold; font-family: 'CustomFont';
color: #eee; font-style: italic;
font-style: italic; letter-spacing: 0.5px;
text-shadow: 0 0 10px #00E5FF; color: #eee;
white-space: nowrap; text-shadow: 1px 3px 10px #000000;
} font-size: 16px;
.header-title{
position: absolute;
top: 0;
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;
} }
.svg { .svg {

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

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

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

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

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

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

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

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

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

@ -1,6 +1,6 @@
<template> <template>
<div class="go-text-box"> <div class="go-text-box">
<div class="content" > <div class="content">
{{ option.dataset }} {{ option.dataset }}
</div> </div>
<svg width="1920" height="94" class="svg" viewBox="0 0 1920 94" fill="none" <svg width="1920" height="94" class="svg" viewBox="0 0 1920 94" fill="none"
@ -333,7 +333,8 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
font-weight: v-bind('fontWeight'); font-weight: v-bind('fontWeight');
font-style: v-bind('fontStyle'); font-style: v-bind('fontStyle');
background-color: v-bind('backgroundColor'); background-color: v-bind('backgroundColor');
text-shadow: 0px 4px 3px v-bind('fontShadowColor'); text-shadow: 0px 4px 3px v-bind('fontShadowColor');
font-family: 'CustomFont';
} }
.go-text-box .svg { .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 = { export const option = {
dataset: dataJson.source, dataset: dataJson.source,
title: '场景分布概况', title: '场景分布概况',
titleColor: '#ffffff', titleColor: '#eee',
titleSize: 20, titleSize: 16,
linkColor: '#00E5FF', linkColor: '#00E5FF',
linkText: '查看更多>>', linkText: '查看更多>>',
sceneNameColor: '#ccc', sceneNameColor: '#ccc',

19
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) { .scene-item:nth-child(n+2) {
margin-top: 7px;; margin-top: 7px;
;
} }
.scene-header { .scene-header {
@ -275,7 +276,7 @@ const option = computed(() => props.chartConfig.option)
} }
.scene-metrics { .scene-metrics {
height: 46px; height: 46px;
width: 384px; width: 384px;
margin: 0 auto; margin: 0 auto;
@ -354,16 +355,18 @@ const option = computed(() => props.chartConfig.option)
.header-title { .header-title {
position: absolute; position: absolute;
top: 0; top: 3px;
height: 45px; height: 45px;
line-height: 45px; line-height: 45px;
left: 80px; left: 80px;
font-size: 16px;
font-weight: bold;
color: #eee;
font-style: italic;
text-shadow: 0 0 10px #00E5FF;
white-space: nowrap; 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 { .svg {

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

@ -397,18 +397,19 @@ onMounted(() => {
} }
} }
.header-title{ .header-title {
position: absolute; position: absolute;
top: 0; top: 0;
height: 45px; height: 45px;
line-height: 45px; line-height: 45px;
left: 80px; left: 80px;
font-size: 16px;
font-weight: bold;
color: #eee;
font-style: italic;
text-shadow: 0 0 10px #00E5FF;
white-space: nowrap; 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 { .svg {

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

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

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

@ -1,6 +1,6 @@
<template> <template>
<div class="go-border-box"> <div class="go-border-box">
<svg class="svg" viewBox="0 0 400 30" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg class="svg" viewBox="0 0 400 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="&#229;&#176;&#143;&#230;&#160;&#135;&#233;&#162;&#152;"> <g id="&#229;&#176;&#143;&#230;&#160;&#135;&#233;&#162;&#152;">
<g id="&#232;&#131;&#140;&#230;&#157;&#191;"> <g id="&#232;&#131;&#140;&#230;&#157;&#191;">
<path id="Vector" opacity="0.4" <path id="Vector" opacity="0.4"
@ -197,23 +197,26 @@
</svg> </svg>
<div class="go-scene-distribution"> <div class="go-scene-distribution">
<div class="header-title">场景分布概况</div> <div class="header-title">场景分布概况</div>
<div class="content"> <div class="content">
<div v-for="(item, index) in option.dataset" :key="index" class="scene-item"> <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-title" :style="{ color: option.titleColor, fontSize: option.titleSize + 'px' }">{{ item.title
<div class="item-label" :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">{{ item.label }}</div> }}</div>
<div class="cube-container"> <div class="item-label" :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">{{ item.label
<img :src="getImageUrl(item.image)" class="cube-image" /> }}</div>
</div> <div class="cube-container">
<div class="value-container"> <img :src="getImageUrl(item.image)" class="cube-image" />
<span class="item-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px', }">{{ item.value }}</span> </div>
<div class="value-container">
<span class="item-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px', }">{{
item.value }}</span>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
</template> </template>
@ -268,7 +271,7 @@ const getImageUrl = (name: string) => {
box-sizing: border-box; box-sizing: border-box;
.item-title { .item-title {
margin-top:10px; margin-top: 10px;
margin-bottom: 8px; margin-bottom: 8px;
font-family: 'Microsoft YaHei', 'Arial', sans-serif; font-family: 'Microsoft YaHei', 'Arial', sans-serif;
line-height: 1.2; line-height: 1.2;
@ -365,18 +368,19 @@ const getImageUrl = (name: string) => {
} }
} }
.header-title{ .header-title {
position: absolute; position: absolute;
top: 0; top: 0;
height: 45px; height: 45px;
line-height: 45px; line-height: 45px;
left: 80px; left: 80px;
font-size: 16px; white-space: nowrap;
font-weight: bold; font-family: 'CustomFont';
color: #eee; font-style: italic;
font-style: italic; letter-spacing: 0.5px;
text-shadow: 0 0 10px #00E5FF; color: #eee;
white-space: nowrap; text-shadow: 1px 3px 10px #000000;
font-size: 16px;
} }
.svg { .svg {
@ -385,6 +389,4 @@ const getImageUrl = (name: string) => {
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped></style>
</style>

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

@ -5,8 +5,8 @@ import dataJson from './data.json'
export const option = { export const option = {
dataset: dataJson.source, dataset: dataJson.source,
title: '未处置报警数TOP5', title: '未处置报警数TOP5',
titleColor: '#ffffff', titleColor: '#eee',
titleSize: 17, titleSize: 16,
rankColor: '#5AA1AD', rankColor: '#5AA1AD',
nameColor: '#eeeeee', nameColor: '#eeeeee',
valueColor: '#eeeeee', valueColor: '#eeeeee',
@ -15,7 +15,7 @@ export const option = {
dropdownOptions: ['当日', '当月', '当年'], dropdownOptions: ['当日', '当月', '当年'],
dropdownDefault: '当日', dropdownDefault: '当日',
iconColor: '#00E5FF', iconColor: '#00E5FF',
letterSpacing: 1, letterSpacing: 0.5,
paddingX: 40, paddingX: 40,
paddingY: -5, paddingY: -5,
isShowButton: false 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; padding: 0 20px 0 20px;
margin-left: 0px; margin-left: 0px;
clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%); 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 = { export const option = {
dataset: dataJson.source, dataset: dataJson.source,
title: '场景分布概况', title: '场景分布概况',
titleColor: '#ffffff', titleColor: '#eee',
titleSize: 20, titleSize: 16,
iconColor: '#00E5FF', iconColor: '#00E5FF',
fontWeight: 'normal', fontWeight: 'normal',
fontStyle: 'normal', fontStyle: 'italic',
paddingX: 10, paddingX: 10,
paddingY: -12, paddingY: -12,
letterSpacing: 1, letterSpacing: 0.5,
isShowButton: false, isShowButton: false,
linkColor: '#00E5FF', linkColor: '#00E5FF',
linkText: '', linkText: '',

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

@ -19,37 +19,43 @@
</div> </div>
<div class="content"> <div class="content">
<div class="scene-row" :style="{ backgroundImage: `url(${backgrounds[0]})` }"> <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 class="metrics-container"> 危化品库</div>
<div class="metric-top-1"> <div class="metrics-container">
<div class="metric-label"> <div class="metric-top-1">
<span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">场景总数</span> <div class="metric-label">
</div> <span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">场景总数</span>
<div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">262</div>
</div> </div>
<div class="metric-top-2"> <div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">262
<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> </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>
</div> </div>
</div> </div>
<div class="scene-row reverse" :style="{ backgroundImage: `url(${backgrounds[1]})` }"> <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 class="metrics-container"> 危废品库</div>
<div class="metric-bottom-1"> <div class="metrics-container">
<div class="metric-label"> <div class="metric-bottom-1">
<span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">智控场景</span> <div class="metric-label">
</div> <span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">智控场景</span>
<div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">6852</div>
</div> </div>
<div class="metric-bottom-2"> <div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">6852
<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> </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>
</div> </div>
</div> </div>
</div> </div>
@ -99,7 +105,7 @@ const option = computed(() => props.chartConfig.option)
.title { .title {
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: 35px; margin-left: 35px;
margin-top: 5px; margin-top: 5px;
.title-text { .title-text {
@ -107,6 +113,13 @@ const option = computed(() => props.chartConfig.option)
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 20px 0 20px; 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;
} }
} }
@ -140,7 +153,7 @@ const option = computed(() => props.chartConfig.option)
margin-right: 90px; margin-right: 90px;
margin-left: 25px; margin-left: 25px;
} }
.metrics-container { .metrics-container {
margin-right: auto; margin-right: auto;
margin-left: 0; margin-left: 0;
@ -196,7 +209,8 @@ const option = computed(() => props.chartConfig.option)
margin: 0 30px; margin: 0 30px;
position: relative; position: relative;
&::before, &::after { &::before,
&::after {
content: ''; content: '';
position: absolute; position: absolute;
left: -2px; left: -2px;
@ -205,9 +219,11 @@ const option = computed(() => props.chartConfig.option)
background-color: #00E5FF; background-color: #00E5FF;
border-radius: 50%; border-radius: 50%;
} }
&::before { &::before {
top: -1px; top: -1px;
} }
&::after { &::after {
bottom: -1px; bottom: -1px;
} }
@ -241,23 +257,25 @@ const option = computed(() => props.chartConfig.option)
left: 9px; // Visually center the value under the text left: 9px; // Visually center the value under the text
} }
} }
.metric-top-1 { .metric-top-1 {
position: relative; position: relative;
left: -85px; left: -85px;
} }
.metric-top-2 { .metric-top-2 {
position: relative; position: relative;
left: -30px; left: -30px;
} }
.metric-bottom-1 { .metric-bottom-1 {
position: relative; position: relative;
left: 15px; left: 15px;
} }
.metric-bottom-2 { .metric-bottom-2 {
position: relative; position: relative;
left:70px; left: 70px;
} }
} }
</style> </style>