zS/go-view-fetch
1
0
Fork 0
forked from lucas/go-view-fetch
Code Pull Requests 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 {

122
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
} }
}) })
</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>

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

@ -1,69 +1,74 @@
<template> <template>
<div class="go-device-status"> <SmallBorder>
<div class="header"> <div class="go-device-status">
<div class="header-left"> <div class="header">
<div class="title-icon-bg" :style="{ backgroundColor: option.headerBgColor1 }"> <div class="title">
<svg-icon icon-class="rocket" class="title-icon" :style="{ color: option.iconColor }"></svg-icon> <div class="title-text">
<span :style="{
color: option.titleColor,
fontSize: option.titleSize + 'px',
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 class="title-text-bg" :style="{ backgroundColor: option.headerBgColor2 }"> <div v-if="option.isShowButton" class="header-right-squares">
<span class="title-text" :style="{ color: option.titleColor, fontSize: option.titleSize + 'px' }">{{ option.title }}</span>
</div> </div>
</div> </div>
<div class="header-right"> <div class="status-section">
<div class="legend"> <div class="online-rate">
<div v-for="color in option.legendColors" :key="color" class="legend-item" :style="{ backgroundColor: color }"></div> <div class="rate-circle-bg">
<div
class="rate-circle"
:style="{ background: `conic-gradient(${option.progressColor} 0% ${option.onlineRate}%, ${option.progressBgColor} ${option.onlineRate}% 100%)` }"
>
<div class="rate-text-wrapper">
<span class="rate-text" :style="{ color: option.progressColor }">{{ option.onlineRate }}</span>
<span class="rate-percent" :style="{ color: option.progressColor }">%</span>
</div>
</div>
</div>
<span class="rate-label">设备在线率</span>
</div>
<div class="progress-bar-wrapper">
<div class="progress-bar" :style="{ backgroundColor: option.progressBgColor }">
<div class="progress" :style="{ width: option.onlineRate + '%', backgroundColor: option.progressColor }"></div>
</div>
</div>
<div class="device-count">
<span class="online">{{ option.onlineDevice }}</span>
<span class="total">/ {{ option.totalDevice }}</span>
</div> </div>
</div> </div>
</div> <div class="table-header" :style="{ backgroundColor: option.headerBackgroundColor, height: option.headerHeight + 'px' }">
<div class="status-section"> <div v-for="header in option.header" :key="header" class="header-item" :style="{ color: option.headerTextColor, fontSize: option.fontSize + 'px' }">
<div class="online-rate"> {{ header }}
<div class="rate-circle-bg"> </div>
<div <div class="header-item"></div>
class="rate-circle" </div>
:style="{ background: `conic-gradient(${option.progressColor} 0% ${option.onlineRate}%, ${option.progressBgColor} ${option.onlineRate}% 100%)` }" <div class="table-body">
> <div v-for="(item, index) in option.dataset" :key="index" class="table-row" :style="{ backgroundColor: option.itemBackgroundColor, height: option.itemHeight + 'px' }">
<div class="rate-text-wrapper"> <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">{{ item.enterprise }}</div>
<span class="rate-text" :style="{ color: option.progressColor }">{{ option.onlineRate }}</span> <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">{{ item.deviceType }}</div>
<span class="rate-percent" :style="{ color: option.progressColor }">%</span> <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">{{ item.deviceName }}</div>
<div class="row-item time-wrapper">
<div class="time" :style="{ backgroundColor: option.timeBgColor, color: option.timeTextColor, fontSize: option.fontSize + 'px' }">
{{ item.time }}
</div> </div>
</div> </div>
</div> </div>
<span class="rate-label">设备在线率</span>
</div>
<div class="progress-bar-wrapper">
<div class="progress-bar" :style="{ backgroundColor: option.progressBgColor }">
<div class="progress" :style="{ width: option.onlineRate + '%', backgroundColor: option.progressColor }"></div>
</div>
</div>
<div class="device-count">
<span class="online">{{ option.onlineDevice }}</span>
<span class="total">/ {{ option.totalDevice }}</span>
</div> </div>
</div> </div>
<div class="table-header" :style="{ backgroundColor: option.headerBackgroundColor, height: option.headerHeight + 'px' }"> </SmallBorder>
<div v-for="header in option.header" :key="header" class="header-item" :style="{ color: option.headerTextColor, fontSize: option.fontSize + 'px' }">
{{ header }}
</div>
<div class="header-item"></div>
</div>
<div class="table-body">
<div v-for="(item, index) in option.dataset" :key="index" class="table-row" :style="{ backgroundColor: option.itemBackgroundColor, height: option.itemHeight + 'px' }">
<div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">{{ item.enterprise }}</div>
<div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">{{ item.deviceType }}</div>
<div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">{{ item.deviceName }}</div>
<div class="row-item time-wrapper">
<div class="time" :style="{ backgroundColor: option.timeBgColor, color: option.timeTextColor, fontSize: option.fontSize + 'px' }">
{{ item.time }}
</div>
</div>
</div>
</div>
</div>
</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,60 +82,45 @@ 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; .title-text {
height: 35px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; padding: 0 20px 0 20px;
clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%); clip-path: polygon(10% 0, 100% 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 {
text-shadow: 0 0 10px rgba(180, 228, 255, 0.8);
}
} }
} }
.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; margin-left: 5px;
height: 8px;
margin-left: 5px;
}
} }
} }
} }