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

123123

Browse Source
This commit is contained in:
lucashu 2025-08-22 11:22:39 +08:00
parent 826d455456
commit 128e25ae6c
3 changed files with 194 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,6 +3,26 @@ 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: ['所属企业', '设备类型', '设备名称'],
@ -22,11 +42,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: '#1A385A' progressBgColor: '#1A385A',
// new properties from AlarmList
fontWeight: 'normal',
fontStyle: 'normal',
paddingX: 40,
paddingY: -19,
letterSpacing: 2,
isShowButton: false
} }
export default class Config extends PublicConfigClass implements CreateComponentType { export default class Config extends PublicConfigClass implements CreateComponentType {

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

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

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

@ -1,18 +1,21 @@
<template> <template>
<SmallBorder>
<div class="go-device-status"> <div class="go-device-status">
<div class="header"> <div class="header">
<div class="header-left"> <div class="title">
<div class="title-icon-bg" :style="{ backgroundColor: option.headerBgColor1 }"> <div class="title-text">
<svg-icon icon-class="rocket" class="title-icon" :style="{ color: option.iconColor }"></svg-icon> <span :style="{
</div> color: option.titleColor,
<div class="title-text-bg" :style="{ backgroundColor: option.headerBgColor2 }"> fontSize: option.titleSize + 'px',
<span class="title-text" :style="{ color: option.titleColor, fontSize: option.titleSize + 'px' }">{{ option.title }}</span> fontWeight: option.fontWeight,
fontStyle: option.fontStyle,
marginLeft: option.paddingX + 'px',
marginTop: option.paddingY + 'px',
letterSpacing: option.letterSpacing + 'px'
}">{{ option.title }}</span>
</div> </div>
</div> </div>
<div class="header-right"> <div v-if="option.isShowButton" class="header-right-squares">
<div class="legend">
<div v-for="color in option.legendColors" :key="color" class="legend-item" :style="{ backgroundColor: color }"></div>
</div>
</div> </div>
</div> </div>
<div class="status-section"> <div class="status-section">
@ -59,11 +62,13 @@
</div> </div>
</div> </div>
</div> </div>
</SmallBorder>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { PropType, computed } from 'vue' import { PropType, computed } from 'vue'
import { option as configOption } from './config' import { option as configOption } from './config'
import SmallBorder from '../SmallBorder/index.vue'
const props = defineProps({ const props = defineProps({
chartConfig: { chartConfig: {
@ -77,63 +82,48 @@ const option = computed(() => props.chartConfig.option)
<style lang="scss" scoped> <style lang="scss" scoped>
.go-device-status { .go-device-status {
position: absolute;
top: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #041126;
color: #ffffff; color: #ffffff;
padding: 15px; padding: 12px;
margin-top: 5px;
box-sizing: border-box; box-sizing: border-box;
.header { .header {
display: flex; display: flex;
align-items: center;
justify-content: space-between; justify-content: space-between;
margin-bottom: 10px; align-items: center;
margin-bottom: 3px;
.header-left { .title {
display: flex; display: flex;
align-items: center; align-items: center;
.title-icon-bg { margin-top: -5px;
width: 50px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%);
.title-icon {
font-size: 28px;
}
}
.title-text-bg {
height: 40px;
padding: 0 20px 0 30px;
margin-left: -10px;
display: flex;
align-items: center;
justify-content: center;
clip-path: polygon(0 0, 95% 0, 100% 100%, 5% 100%);
.title-text { .title-text {
text-shadow: 0 0 10px rgba(180, 228, 255, 0.8); height: 35px;
} display: flex;
align-items: center;
padding: 0 20px 0 20px;
clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
} }
} }
.header-right { .header-right-squares {
display: flex; display: flex;
align-items: center; align-items: center;
.legend {
display: flex; .square {
margin-right: 10px; width: 10px;
.legend-item { height: 10px;
width: 15px;
height: 8px;
margin-left: 5px; margin-left: 5px;
} }
} }
} }
}
.status-section { .status-section {
display: flex; display: flex;