zS/go-view-fetch
1
0
Fork 0
forked from lucas/go-view-fetch
Code Pull Requests Activity

Compare commits

base: zS:5640e74d4f1a67e05e270ee0317071b124c1c1a0
Branches Tags
zS:main
lucas:main
..
compare: zS:356e0d4df7d1835a7bddd256e9b5852fc5183671
Branches Tags
zS:main
lucas:main

No commits in common. "5640e74d4f1a67e05e270ee0317071b124c1c1a0" and "356e0d4df7d1835a7bddd256e9b5852fc5183671" have entirely different histories.
5640e74d4f ... 356e0d4df7

6 changed files with 70 additions and 217 deletions
Show Stats Expand all files Collapse all files

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

@ -2,27 +2,6 @@ import { PublicConfigClass } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d' import { CreateComponentType } from '@/packages/index.d'
import { DeviceStatusConfig } from './index' import { DeviceStatusConfig } from './index'
import dataJson from './data.json' 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 = { export const option = {
dataset: dataJson.source, dataset: dataJson.source,
header: ['所属企业', '设备类型', '设备名称'], header: ['所属企业', '设备类型', '设备名称'],
@ -41,16 +20,15 @@ export const option = {
onlineRate: 75, onlineRate: 75,
onlineDevice: 23, onlineDevice: 23,
totalDevice: 100, totalDevice: 100,
headerBgColor1: '#0059c9',
headerBgColor2: '#003a8c',
legendColors: ['#00E5FF', '#00FF7F', '#FFFFFF'],
progressColor: '#00E5FF', progressColor: '#00E5FF',
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: -4,
letterSpacing: 1, letterSpacing: 1
// new properties from AlarmList
fontWeight: 'normal',
fontStyle: 'normal',
isShowButton: false
} }
export default class Config extends PublicConfigClass implements CreateComponentType { export default class Config extends PublicConfigClass implements CreateComponentType {

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

@ -1,102 +1,40 @@
<template> <template>
<collapse-item name="信息" :expanded="true"> <div class="go-device-status-config">
<setting-item-box name="标题" :alone="true"> <n-form-item label="标题">
<setting-item> <n-input v-model:value="option.title" />
<n-input v-model:value="optionData.title" type="textarea" size="small"></n-input> </n-form-item>
</setting-item> <n-form-item label="标题大小">
</setting-item-box> <n-input-number v-model:value="option.titleSize" />
</collapse-item> </n-form-item>
<n-form-item label="字体大小">
<collapse-item name="样式" :expanded="true"> <n-input-number v-model:value="option.fontSize" />
<setting-item-box name="标题"> </n-form-item>
<setting-item name="颜色"> <n-form-item label="表头高度">
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.titleColor"></n-color-picker> <n-input-number v-model:value="option.headerHeight" />
</setting-item> </n-form-item>
<setting-item name="字体大小"> <n-form-item label="行高度">
<n-input-number v-model:value="optionData.titleSize" size="small" placeholder="字体大小"></n-input-number> <n-input-number v-model:value="option.itemHeight" />
</setting-item> </n-form-item>
<setting-item name="字体粗细"> <n-form-item label="在线率">
<n-select v-model:value="optionData.fontWeight" size="small" :options="fontWeightOptions" /> <n-input-number v-model:value="option.onlineRate" />
</setting-item> </n-form-item>
<setting-item name="字体风格"> <n-form-item label="在线设备">
<n-select v-model:value="optionData.fontStyle" size="small" :options="fontStyleOptions" /> <n-input-number v-model:value="option.onlineDevice" />
</setting-item> </n-form-item>
<setting-item name="X轴内边距"> <n-form-item label="总设备">
<n-input-number v-model:value="optionData.paddingX" size="small" placeholder="输入内边距"></n-input-number> <n-input-number v-model:value="option.totalDevice" />
</setting-item> </n-form-item>
<setting-item name="Y轴内边距"> </div>
<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> </template>
<script setup lang="ts"> <script setup lang="ts">
import { PropType } from 'vue' import { PropType } from 'vue'
import { option, FontWeightEnum, FontWeightObject, FontStyleEnum, FontStyleObject } from './config' import { option } from './config'
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
const props = defineProps({ defineProps({
optionData: { option: {
type: Object as PropType<typeof option>, type: Object as PropType<typeof option>,
required: true required: true
} }
}) })
</script>
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,11 +119,12 @@ SmallBorder {
.header { .header {
display: flex; display: flex;
align-items: center;
justify-content: space-between; justify-content: space-between;
margin-bottom: 5px; margin-bottom: 5px;
.header-right-squares { .header-right {
display: flex; display: flex;
align-items: center; align-items: center;

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

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

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

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

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

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