lucas/go-view-fetch
1
1
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

main #6

Merged
lucas merged 11 commits from zS/go-view-fetch:main into main 2025-08-22 15:50:05 +08:00
Conversation 0 Commits 11 Files Changed 26 +217 -70
6 changed files with 217 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 5640e74d4f - Show all commits

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

@ -2,6 +2,27 @@ import { PublicConfigClass } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d'
import { DeviceStatusConfig } from './index'
import dataJson from './data.json'
export enum FontWeightEnum {
NORMAL = '常规',
BOLD = '加粗',
}
export enum FontStyleEnum {
NORMAL = '常规',
ITALIC = '斜体',
}
export const FontWeightObject = {
[FontWeightEnum.NORMAL]: 'normal',
[FontWeightEnum.BOLD]: 'bold',
}
export const FontStyleObject = {
[FontStyleEnum.NORMAL]: 'normal',
[FontStyleEnum.ITALIC]: 'italic',
}
export const option = {
dataset: dataJson.source,
header: ['所属企业', '设备类型', '设备名称'],
@ -20,15 +41,16 @@ export const option = {
onlineRate: 75,
onlineDevice: 23,
totalDevice: 100,
headerBgColor1: '#0059c9',
headerBgColor2: '#003a8c',
legendColors: ['#00E5FF', '#00FF7F', '#FFFFFF'],
progressColor: '#00E5FF',
progressBgColor: 'rgba(0, 0, 0, 0.1)',
progressTextColor: '#DDE3E9',
paddingX: 60,
paddingY: -4,
letterSpacing: 1
letterSpacing: 1,
// new properties from AlarmList
fontWeight: 'normal',
fontStyle: 'normal',
isShowButton: false
}
export default class Config extends PublicConfigClass implements CreateComponentType {

120
src/packages/components/Charts/MyComponents/DeviceStatus/config.vue
View File

@ -1,40 +1,102 @@
<template>
<div class="go-device-status-config">
<n-form-item label="标题">
<n-input v-model:value="option.title" />
</n-form-item>
<n-form-item label="标题大小">
<n-input-number v-model:value="option.titleSize" />
</n-form-item>
<n-form-item label="字体大小">
<n-input-number v-model:value="option.fontSize" />
</n-form-item>
<n-form-item label="表头高度">
<n-input-number v-model:value="option.headerHeight" />
</n-form-item>
<n-form-item label="行高度">
<n-input-number v-model:value="option.itemHeight" />
</n-form-item>
<n-form-item label="在线率">
<n-input-number v-model:value="option.onlineRate" />
</n-form-item>
<n-form-item label="在线设备">
<n-input-number v-model:value="option.onlineDevice" />
</n-form-item>
<n-form-item label="总设备">
<n-input-number v-model:value="option.totalDevice" />
</n-form-item>
</div>
<collapse-item name="信息" :expanded="true">
<setting-item-box name="标题" :alone="true">
<setting-item>
<n-input v-model:value="optionData.title" type="textarea" size="small"></n-input>
</setting-item>
</setting-item-box>
</collapse-item>
<collapse-item name="样式" :expanded="true">
<setting-item-box name="标题">
<setting-item name="颜色">
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.titleColor"></n-color-picker>
</setting-item>
<setting-item name="字体大小">
<n-input-number v-model:value="optionData.titleSize" size="small" placeholder="字体大小"></n-input-number>
</setting-item>
<setting-item name="字体粗细">
<n-select v-model:value="optionData.fontWeight" size="small" :options="fontWeightOptions" />
</setting-item>
<setting-item name="字体风格">
<n-select v-model:value="optionData.fontStyle" size="small" :options="fontStyleOptions" />
</setting-item>
<setting-item name="X轴内边距">
<n-input-number v-model:value="optionData.paddingX" size="small" placeholder="输入内边距"></n-input-number>
</setting-item>
<setting-item name="Y轴内边距">
<n-input-number v-model:value="optionData.paddingY" size="small" placeholder="输入内边距"></n-input-number>
</setting-item>
<setting-item name="字间距">
<n-input-number v-model:value="optionData.letterSpacing" size="small" placeholder="输入字间距"></n-input-number>
</setting-item>
</setting-item-box>
</collapse-item>
<collapse-item name="内容" :expanded="true">
<setting-item-box name="字体大小">
<setting-item>
<n-input-number v-model:value="optionData.fontSize" size="small" />
</setting-item>
</setting-item-box>
<setting-item-box name="表头高度">
<setting-item>
<n-input-number v-model:value="optionData.headerHeight" size="small" />
</setting-item>
</setting-item-box>
<setting-item-box name="行高度">
<setting-item>
<n-input-number v-model:value="optionData.itemHeight" size="small" />
</setting-item>
</setting-item-box>
<setting-item-box name="在线率">
<setting-item>
<n-input-number v-model:value="optionData.onlineRate" size="small" />
</setting-item>
</setting-item-box>
<setting-item-box name="在线设备">
<setting-item>
<n-input-number v-model:value="optionData.onlineDevice" size="small" />
</setting-item>
</setting-item-box>
<setting-item-box name="总设备">
<setting-item>
<n-input-number v-model:value="optionData.totalDevice" size="small" />
</setting-item>
</setting-item-box>
</collapse-item>
</template>
<script setup lang="ts">
import { PropType } from 'vue'
import { option } from './config'
import { option, FontWeightEnum, FontWeightObject, FontStyleEnum, FontStyleObject } from './config'
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
defineProps({
option: {
const props = defineProps({
optionData: {
type: Object as PropType<typeof option>,
required: true
}
})
const fontWeightOptions = [
{
label: FontWeightEnum.NORMAL,
value: FontWeightObject[FontWeightEnum.NORMAL]
},
{
label: FontWeightEnum.BOLD,
value: FontWeightObject[FontWeightEnum.BOLD]
}
]
const fontStyleOptions = [
{
label: FontStyleEnum.NORMAL,
value: FontStyleObject[FontStyleEnum.NORMAL]
},
{
label: FontStyleEnum.ITALIC,
value: FontStyleObject[FontStyleEnum.ITALIC]
}
]
</script>

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

@ -119,12 +119,11 @@ SmallBorder {
.header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 5px;
.header-right {
.header-right-squares {
display: flex;
align-items: center;

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

@ -38,9 +38,9 @@ export const option = {
sceneNameColor: '#ffffff',
sceneNameSize: 20,
labelColor: '#B0E0E6',
labelSize: 16,
labelSize: 14,
valueColor: '#ffffff',
valueSize: 28,
valueSize: 22,
pointColor1: '#00E5FF',
pointColor2: '#FFD700'
}

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

@ -18,22 +18,45 @@
<a class="link" :style="{ color: option.linkColor }">{{ option.linkText }}</a>
</div>
<div class="content">
<div v-for="(scene, index) in option.dataset" :key="index" class="scene-row"
:class="{ reverse: index % 2 !== 0 }" :style="{ backgroundImage: `url(${backgrounds[index]})` }">
<div class="scene-name" :style="{ color: option.sceneNameColor, fontSize: option.sceneNameSize + 'px' }">{{
scene.name }}</div>
<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="metrics-container">
<template v-for="(metric, mIndex) in scene.metrics" :key="mIndex">
<div class="metric">
<div class="metric-top-1">
<div class="metric-label">
<span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">{{ metric.label
}}</span>
<span
:style="{ color: option.labelColor, fontSize: option.labelSize + 'px', marginLeft: 8 + 'px' }">场景总数</span>
</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>
</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="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>
<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' }">{{
metric.value }}</div>
</div>
</template>
</div>
</div>
</div>
@ -64,6 +87,7 @@ const option = computed(() => props.chartConfig.option)
.go-workshop-scene {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 12px;
@ -111,16 +135,16 @@ const option = computed(() => props.chartConfig.option)
.scene-row {
display: flex;
align-items: center;
padding: 0 25px;
height: 120px; // Taller rows
padding: 0 8px;
height: 95px; // Taller rows
background-size: 100% 100%;
background-repeat: no-repeat;
&.reverse {
flex-direction: row-reverse;
.scene-name {
margin-right: 0;
.scene-name-2 {
margin-right: 95px;
margin-left: 25px;
}
@ -158,9 +182,13 @@ const option = computed(() => props.chartConfig.option)
}
}
.scene-name {
.scene-name-1,
.scene-name-2 {
font-weight: bold;
margin-left: 105px;
}
.scene-name-1 {
margin-left: 95px;
}
.metrics-container {
@ -175,7 +203,8 @@ const option = computed(() => props.chartConfig.option)
margin: 0 30px;
position: relative;
&::before, &::after {
&::before,
&::after {
content: '';
position: absolute;
left: -2px;
@ -184,35 +213,68 @@ const option = computed(() => props.chartConfig.option)
background-color: #00E5FF;
border-radius: 50%;
}
&::before {
top: -1px;
}
&::after {
bottom: -1px;
}
}
}
.metric {
.metric-top-1,
.metric-top-2,
.metric-bottom-1,
.metric-bottom-2 {
display: flex;
flex-direction: column;
align-items: flex-start;
align-items: center;
.metric-label {
display: flex;
align-items: center;
margin-bottom: 10px; // More space
margin-bottom: 2px;
span {
margin-bottom: -5px;
margin-left: 3px;
}
.point {
width: 0px; // Bigger point
height: 0px;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 10px;
}
}
.metric-value {
font-weight: bold;
margin-left: 40px; // Align with label text
font-weight: normal;
position: relative;
left: 10px; // 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>

2
src/packages/components/Charts/MyComponents/index.ts
View File

@ -8,6 +8,8 @@ import { LineDropdownConfig } from './LineDropdown/index'
import { PieCenterConfig } from './PieCenter/index'
import { LineGraph01Config } from './LineGraph01/index'
import { LineGraph02Config } from './LineGraph02/index'
import { LineGraph01Config } from './LineGraph01/index'
import { LineGraph02Config } from './LineGraph02/index'
import { MaxTrimConfig } from './MaxTrim/index'
import { SmallBorderConfig } from './SmallBorder/index'