Compare commits
No commits in common. "29472f217e0ea99df2fe9afd0827d153427034bd" and "128e25ae6c175c7392e2a5cc17362d4e0f05ba97" have entirely different histories.
29472f217e
...
128e25ae6c
Binary file not shown.
|
Before Width: | Height: | Size: 155 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 131 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 172 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 178 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 125 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 83 KiB |
@ -2,6 +2,7 @@ import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { AlarmListConfig } from './index'
|
||||
import dataJson from './data.json'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
export enum FontWeightEnum {
|
||||
NORMAL = '常规',
|
||||
BOLD = '加粗',
|
||||
@ -32,8 +33,8 @@ export const option = {
|
||||
'未解决': '#FF4D4F',
|
||||
'已解决': '#ffffff'
|
||||
},
|
||||
headerHeight: 28,
|
||||
itemHeight: 28,
|
||||
headerHeight: 30,
|
||||
itemHeight: 30,
|
||||
fontSize: 12,
|
||||
title: '近60分钟报警信息',
|
||||
titleSize: 17,
|
||||
@ -42,8 +43,8 @@ export const option = {
|
||||
fontWeight: 'normal',
|
||||
fontStyle: 'normal',
|
||||
paddingX: 40,
|
||||
paddingY: -30,
|
||||
letterSpacing: 1,
|
||||
paddingY: -19,
|
||||
letterSpacing: 2,
|
||||
isShowButton: false
|
||||
}
|
||||
|
||||
@ -51,6 +52,6 @@ export default class Config extends PublicConfigClass implements CreateComponent
|
||||
public key = AlarmListConfig.key
|
||||
public chartConfig = AlarmListConfig
|
||||
public option = option
|
||||
|
||||
public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 300, zIndex: 1 }
|
||||
|
||||
}
|
||||
|
||||
@ -38,7 +38,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import { option, FontWeightEnum, FontWeightObject, FontStyleEnum, FontStyleObject } from './config'
|
||||
import { option, WritingModeEnum, WritingModeObject, FontWeightEnum, FontWeightObject, FontStyleEnum, FontStyleObject } from './config'
|
||||
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
|
||||
@ -3,7 +3,9 @@
|
||||
<div class="go-alarm-list">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
|
||||
<!-- <div class="title-prefix">
|
||||
<svg-icon icon-class="rocket" class="title-icon" :style="{ color: option.iconColor }"></svg-icon>
|
||||
</div> -->
|
||||
<div class="title-text">
|
||||
<span :style="{
|
||||
color: option.titleColor,
|
||||
@ -17,12 +19,13 @@
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="option.isShowButton" class="header-right-squares">
|
||||
<div class="square" style="background-color: #2e69e0"></div>
|
||||
<!-- <div class="square" style="background-color: #2e69e0"></div>
|
||||
<div class="square" style="background-color: #2e9bf0"></div>
|
||||
<div class="square" style="background-color: #2ef0b3"></div>
|
||||
<div class="square" style="background-color: #2ef0b3"></div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-header" :style="{
|
||||
// backgroundColor: option.headerBackgroundColor,
|
||||
height: option.headerHeight + 'px'
|
||||
}">
|
||||
<div v-for="header in option.header" :key="header" class="header-item"
|
||||
@ -71,40 +74,53 @@ const getStatusColor = (status: string) => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.SmallBorder {
|
||||
position: relative;
|
||||
// background-color: #ffffff;
|
||||
}
|
||||
|
||||
.go-alarm-list {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// background-color: #2066df;
|
||||
color: #ffffff;
|
||||
padding: 12px;
|
||||
margin-top: 5px;
|
||||
box-sizing: border-box;
|
||||
// background-color: #4da6ff;
|
||||
z-index: 10;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 3px;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: -5px;
|
||||
|
||||
// .title-prefix {
|
||||
// width: 40px;
|
||||
// height: 35px;
|
||||
// // background-image: linear-gradient(to bottom, #2e69e0, #1e55a7);
|
||||
// clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
// margin-left: 0px;
|
||||
|
||||
// .title-icon {
|
||||
// font-size: 22px;
|
||||
// }
|
||||
// }
|
||||
|
||||
.title-text {
|
||||
height: 35px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// background-image: linear-gradient(to bottom, #17325f, #0e2142);
|
||||
padding: 0 20px 0 20px;
|
||||
// margin-left: -10px;
|
||||
clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
|
||||
}
|
||||
}
|
||||
|
||||
@ -126,7 +142,6 @@ const getStatusColor = (status: string) => {
|
||||
padding: 0 10px;
|
||||
background: linear-gradient(to top, #226493c8, #0f2448);
|
||||
border-bottom: 2px solid #4da6ff;
|
||||
margin-top: 10px;
|
||||
|
||||
.header-item {
|
||||
flex: 1 0 25%;
|
||||
|
||||
@ -26,30 +26,30 @@ export const FontStyleObject = {
|
||||
export const option = {
|
||||
dataset: dataJson.source,
|
||||
header: ['所属企业', '设备类型', '设备名称'],
|
||||
headerTextColor: '#7F9DB4',
|
||||
headerTextColor: '#ffffff',
|
||||
textColor: '#ffffff',
|
||||
itemBackgroundColor: '#212936',
|
||||
timeTextColor: '#B75055',
|
||||
timeBgColor: '#562922',
|
||||
headerHeight: 30,
|
||||
itemHeight: 28,
|
||||
fontSize: 11,
|
||||
headerBackgroundColor: 'rgba(26, 56, 90, 0.5)',
|
||||
itemBackgroundColor: 'rgba(15, 35, 62, 0.5)',
|
||||
timeTextColor: '#ffffff',
|
||||
timeBgColor: '#FF4D4F',
|
||||
headerHeight: 40,
|
||||
itemHeight: 35,
|
||||
fontSize: 14,
|
||||
title: '设备实时在线概况',
|
||||
titleSize: 17,
|
||||
titleColor: '#ffffff',
|
||||
titleSize: 20,
|
||||
titleColor: '#B4E4FF',
|
||||
iconColor: '#00E5FF',
|
||||
onlineRate: 75,
|
||||
onlineDevice: 23,
|
||||
totalDevice: 100,
|
||||
progressColor: '#00E5FF',
|
||||
progressBgColor: 'rgba(0, 0, 0, 0.1)',
|
||||
progressTextColor: '#DDE3E9',
|
||||
paddingX: 60,
|
||||
paddingY: -4,
|
||||
letterSpacing: 1,
|
||||
progressBgColor: '#1A385A',
|
||||
// new properties from AlarmList
|
||||
fontWeight: 'normal',
|
||||
fontStyle: 'normal',
|
||||
paddingX: 40,
|
||||
paddingY: -19,
|
||||
letterSpacing: 2,
|
||||
isShowButton: false
|
||||
}
|
||||
|
||||
|
||||
@ -2,77 +2,60 @@
|
||||
<SmallBorder>
|
||||
<div class="go-device-status">
|
||||
<div class="header">
|
||||
<div class="header-left" :style="{
|
||||
marginLeft:
|
||||
option.paddingX
|
||||
+ 'px',
|
||||
marginTop:
|
||||
option.paddingY
|
||||
+ 'px'
|
||||
}
|
||||
">
|
||||
<div class="title-text-bg" :style="{
|
||||
|
||||
}">
|
||||
<span class="title-text" :style="{
|
||||
letterSpacing: option.letterSpacing + 'px',
|
||||
color: option.titleColor, fontSize: option.titleSize + 'px'
|
||||
}">{{
|
||||
option.title }}</span>
|
||||
<div class="title">
|
||||
<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 v-if="option.isShowButton" class="header-right-squares">
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-section">
|
||||
<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.progressTextColor }">{{ option.onlineRate }}</span>
|
||||
<span class="rate-percent" :style="{ color: option.progressTextColor }">%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="online-content">
|
||||
<div class="text-content">
|
||||
<span class="online-text">
|
||||
设备在线率
|
||||
</span>
|
||||
<div class="online-nums">
|
||||
<span class="online-num">{{ option.onlineDevice }}</span>
|
||||
<span class="total-num">/{{ option.totalDevice }}</span>
|
||||
</div>
|
||||
</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 class="online-rate">
|
||||
<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 class="table-header" :style="{
|
||||
height: option.headerHeight + 'px'
|
||||
}">
|
||||
<div v-for="header in option.header" :key="header" class="header-item"
|
||||
:style="{ color: option.headerTextColor, fontSize: option.fontSize + 'px' }">
|
||||
<div class="table-header" :style="{ backgroundColor: option.headerBackgroundColor, height: option.headerHeight + 'px' }">
|
||||
<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 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' }">
|
||||
<div class="time" :style="{ backgroundColor: option.timeBgColor, color: option.timeTextColor, fontSize: option.fontSize + 'px' }">
|
||||
{{ item.time }}
|
||||
</div>
|
||||
</div>
|
||||
@ -80,13 +63,12 @@
|
||||
</div>
|
||||
</div>
|
||||
</SmallBorder>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import SmallBorder from '../SmallBorder/index.vue'
|
||||
import { PropType, computed } from 'vue'
|
||||
import { option as configOption } from './config'
|
||||
import SmallBorder from '../SmallBorder/index.vue'
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
@ -99,190 +81,148 @@ const option = computed(() => props.chartConfig.option)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
SmallBorder {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.go-device-status {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// background-color: #041126;
|
||||
color: #ffffff;
|
||||
padding: 10px 15px;
|
||||
// padding-bottom: 3px;
|
||||
padding: 12px;
|
||||
margin-top: 5px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 5px;
|
||||
align-items: center;
|
||||
margin-bottom: 3px;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: -5px;
|
||||
|
||||
.title-text {
|
||||
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-squares {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.legend {
|
||||
display: flex;
|
||||
margin-right: 10px;
|
||||
|
||||
.legend-item {
|
||||
width: 15px;
|
||||
height: 8px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.square {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-section {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
align-items: center;
|
||||
margin-bottom: -2px;
|
||||
margin-bottom: 15px;
|
||||
padding: 0 10px;
|
||||
|
||||
.rate-circle-bg {
|
||||
position: relative;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
.online-rate {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-bottom: 2px;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
left: -5px;
|
||||
right: -5px;
|
||||
bottom: -5px;
|
||||
border-radius: 50%;
|
||||
filter: blur(5px);
|
||||
background: radial-gradient(circle, #0d5585, transparent 60%);
|
||||
}
|
||||
}
|
||||
|
||||
.rate-circle {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background-color: #041126;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.rate-text-wrapper {
|
||||
position: absolute;
|
||||
|
||||
.rate-text {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.rate-percent {
|
||||
font-size: 12px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.online-content {
|
||||
margin-top: -5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
justify-content: center;
|
||||
margin-left: 10px;
|
||||
|
||||
.text-content {
|
||||
margin-right: 15px;
|
||||
.rate-circle-bg {
|
||||
position: relative;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-bottom: 2px;
|
||||
|
||||
.online-num {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #23DEE9;
|
||||
}
|
||||
|
||||
.total-num {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #555657;
|
||||
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
left: -5px;
|
||||
right: -5px;
|
||||
bottom: -5px;
|
||||
border-radius: 50%;
|
||||
filter: blur(5px);
|
||||
background: radial-gradient(circle, rgba(0, 229, 255, 0.5), transparent 70%);
|
||||
}
|
||||
}
|
||||
.rate-circle {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
&::before {
|
||||
content: '';
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background-color: #041126;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.rate-text-wrapper {
|
||||
position: absolute;
|
||||
.rate-text {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.rate-percent {
|
||||
font-size: 14px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.rate-label {
|
||||
font-size: 16px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-bar-wrapper {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
border-radius: 1px;
|
||||
height: 12px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
box-shadow: #082846 0px 0px 0px 2px;
|
||||
|
||||
.progress {
|
||||
height: 100%;
|
||||
border-radius: 1px;
|
||||
background: linear-gradient(to right, #0A5987, #71D8FE);
|
||||
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
.device-count {
|
||||
font-size: 20px;
|
||||
margin-left: 15px;
|
||||
.online {
|
||||
color: #00e5ff;
|
||||
}
|
||||
.total {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.table-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
border-radius: 1px;
|
||||
background: linear-gradient(to top, #226493c8, #0f2448);
|
||||
border-bottom: 2px solid #4da6ff;
|
||||
|
||||
|
||||
border-radius: 5px;
|
||||
.header-item {
|
||||
text-align: left;
|
||||
padding-left: 10px;
|
||||
|
||||
&:nth-child(1) {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
flex: 1;
|
||||
}
|
||||
&:nth-child(1) { flex: 2; }
|
||||
&:nth-child(2) { flex: 2; }
|
||||
&:nth-child(3) { flex: 3; }
|
||||
&:nth-child(4) { flex: 1; }
|
||||
}
|
||||
}
|
||||
|
||||
@ -290,60 +230,32 @@ SmallBorder {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
margin-top: 5px;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
/* 隐藏滚动条 */
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
scrollbar-width: none;
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
margin-bottom: 3px;
|
||||
border-radius: 1px;
|
||||
border-bottom: 1px solid #29333C;
|
||||
|
||||
margin-bottom: 5px;
|
||||
border-radius: 5px;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.row-item {
|
||||
text-align: left;
|
||||
padding-left: 10px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:nth-child(1) {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
flex: 1;
|
||||
}
|
||||
&:nth-child(1) { flex: 2; }
|
||||
&:nth-child(2) { flex: 2; }
|
||||
&:nth-child(3) { flex: 3; }
|
||||
}
|
||||
|
||||
.time-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-right: 10px;
|
||||
|
||||
.time {
|
||||
padding: 1px 6px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,6 +2,7 @@ import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { LineGraph01Config } from './index'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import dataJson from './data.json'
|
||||
export interface DataSourceItem {
|
||||
dataname: string;
|
||||
@ -100,22 +101,14 @@ export const option = {
|
||||
series: [seriesItem]
|
||||
};
|
||||
|
||||
const configSet = {
|
||||
titlefontWeight: 'normal',
|
||||
titlefontSize: 17,
|
||||
titlefontStyle: 'normal',
|
||||
titlecolor: '#ffffff',
|
||||
titlePaddingX: 0,
|
||||
titlePaddingY: 0,
|
||||
isShowButton: false
|
||||
}
|
||||
export { configSet }
|
||||
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key: string = LineGraph01Config.key
|
||||
public chartConfig = cloneDeep(LineGraph01Config)
|
||||
public mockData = dataJson
|
||||
// 图表配置项
|
||||
public option = echartOptionProfixHandle(option, includes)
|
||||
|
||||
public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 300, zIndex: 1 }
|
||||
}
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 461 B After Width: | Height: | Size: 461 B |
@ -196,15 +196,8 @@
|
||||
</defs>
|
||||
</svg>
|
||||
<div class="buttonContent">
|
||||
<span class="title" :style="{
|
||||
color: configSet.titlecolor,
|
||||
fontSize: configSet.titlefontSize + 'px',
|
||||
fontStyle: configSet.titlefontStyle,
|
||||
fontWeight: configSet.titlefontWeight,
|
||||
marginTop: configSet.titlePaddingY + 'px',
|
||||
marginLeft: configSet.titlePaddingX + 'px'
|
||||
}">{{ configData.title }}</span>
|
||||
<button v-if="configSet.isShowButton" class="timeShow" @click="toggleDropdown" ref="buttonRef">
|
||||
<span class="title">{{ configData.title }}</span>
|
||||
<button v-if="isShowButton" class="timeShow" @click="toggleDropdown" ref="buttonRef">
|
||||
{{ configData.dataSource[selectedIndex]?.dataname || '选择数据' }}
|
||||
</button>
|
||||
</div>
|
||||
@ -235,7 +228,7 @@
|
||||
</div>
|
||||
<div class="chartsContent">
|
||||
<span class="smallText Tips">
|
||||
<img class="icon" src="./assets/icon01.png" alt="">
|
||||
<img class="icon" src="./icon01.png" alt="">
|
||||
{{ configData.tip }}</span>
|
||||
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="chartOption" :update-options="{
|
||||
replaceMerge: replaceMergeArr
|
||||
@ -251,14 +244,14 @@ import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { LineChart } from 'echarts/charts'
|
||||
import Config, { DatasType, includes, seriesItem, configSet } from './config'
|
||||
import Config, { DatasType, includes, seriesItem } from './config'
|
||||
import { mergeTheme } from '@/packages/public/chart'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
|
||||
import isObject from 'lodash/isObject'
|
||||
import { config } from 'process'
|
||||
// const isShowButton = false;
|
||||
|
||||
const isShowButton = false;
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
@ -349,12 +342,7 @@ watch(
|
||||
const parsedData = parseMockData(newMockData);
|
||||
selectedIndex.value = parsedData.dataIndex;
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep:
|
||||
// true
|
||||
false
|
||||
}
|
||||
{ immediate: true, deep: true }
|
||||
);
|
||||
|
||||
|
||||
@ -375,10 +363,10 @@ const chartOption = computed(() => {
|
||||
return mergedOption;
|
||||
});
|
||||
|
||||
// const wrapperStyle = computed(() => ({
|
||||
// width: props.chartConfig.attr.w + 'px',
|
||||
// height: "16%"
|
||||
// }))
|
||||
const wrapperStyle = computed(() => ({
|
||||
width: props.chartConfig.attr.w + 'px',
|
||||
height: "16%"
|
||||
}))
|
||||
|
||||
|
||||
// dataset 无法变更条数的补丁 (保持不变)
|
||||
@ -442,7 +430,7 @@ onUnmounted(() => {
|
||||
<style lang="scss" scoped>
|
||||
@include go(border-box) {
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -653,15 +641,13 @@ onUnmounted(() => {
|
||||
|
||||
|
||||
.buttonContent span {
|
||||
font-size: 17px;
|
||||
font-size: 15px;
|
||||
color: #ffffff;
|
||||
letter-spacing: 1px;
|
||||
font-weight: normal;
|
||||
letter-spacing: 2px;
|
||||
font-weight: 550;
|
||||
text-shadow: -4px -4px 10px #3B8ED4;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-top: -2px;
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,6 +2,7 @@ import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { LineGraph02Config } from './index'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import dataJson from './data.json'
|
||||
export interface DataSourceItem {
|
||||
dataname: string;
|
||||
@ -100,16 +101,6 @@ export const option = {
|
||||
series: [seriesItem]
|
||||
};
|
||||
|
||||
const configSet = {
|
||||
titlefontWeight: 'normal',
|
||||
titlefontSize: 17,
|
||||
titlefontStyle: 'normal',
|
||||
titlecolor: '#ffffff',
|
||||
titlePaddingX: 0,
|
||||
titlePaddingY: 0,
|
||||
isShowButton: false
|
||||
}
|
||||
export { configSet }
|
||||
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
@ -118,6 +109,6 @@ export default class Config extends PublicConfigClass implements CreateComponent
|
||||
public mockData = dataJson
|
||||
// 图表配置项
|
||||
public option = echartOptionProfixHandle(option, includes)
|
||||
|
||||
public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 300, zIndex: 1 }
|
||||
}
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 461 B After Width: | Height: | Size: 461 B |
@ -2,15 +2,10 @@
|
||||
<div class="go-border-box">
|
||||
<!-- timeshow 按钮，添加点击事件和 ref -->
|
||||
<div class="buttonContent">
|
||||
<span class="title" :style="{
|
||||
color: configSet.titlecolor,
|
||||
fontSize: configSet.titlefontSize + 'px',
|
||||
fontStyle: configSet.titlefontStyle,
|
||||
fontWeight: configSet.titlefontWeight,
|
||||
marginTop: configSet.titlePaddingY + 'px',
|
||||
marginLeft: configSet.titlePaddingX + 'px'
|
||||
}">{{ configData.title }}</span>
|
||||
<button v-if="configSet.isShowButton" class="timeShow" @click="toggleDropdown" ref="buttonRef">
|
||||
|
||||
<span class="title">{{ configData.title }}</span>
|
||||
|
||||
<button v-if="isShowButton" class="timeShow" @click="toggleDropdown" ref="buttonRef">
|
||||
{{ configData.dataSource[selectedIndex]?.dataname || '选择数据' }}
|
||||
</button>
|
||||
</div>
|
||||
@ -41,7 +36,7 @@
|
||||
</div>
|
||||
<div class="chartsContent">
|
||||
<span class="smallText Tips">
|
||||
<img class="icon" src="./assets/icon01.png" alt="">
|
||||
<img class="icon" src="./icon01.png" alt="">
|
||||
{{ configData.tip }}</span>
|
||||
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="chartOption" :update-options="{
|
||||
replaceMerge: replaceMergeArr
|
||||
@ -58,13 +53,14 @@ import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { LineChart } from 'echarts/charts'
|
||||
import Config, { DatasType, includes, seriesItem, configSet } from './config'
|
||||
import Config, { DatasType, includes, seriesItem } from './config'
|
||||
import { mergeTheme } from '@/packages/public/chart'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
|
||||
import isObject from 'lodash/isObject'
|
||||
|
||||
const isShowButton = false;
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
@ -155,7 +151,7 @@ watch(
|
||||
const parsedData = parseMockData(newMockData);
|
||||
selectedIndex.value = parsedData.dataIndex;
|
||||
},
|
||||
{ immediate: true, deep: false }
|
||||
{ immediate: true, deep: true }
|
||||
);
|
||||
|
||||
|
||||
@ -241,7 +237,11 @@ onUnmounted(() => {
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'Componentz01'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go(border-box) {
|
||||
@ -420,11 +420,13 @@ onUnmounted(() => {
|
||||
|
||||
.buttonContent span {
|
||||
|
||||
font-size: 17px;
|
||||
font-size: 15px;
|
||||
color: #ffffff;
|
||||
letter-spacing: 1px;
|
||||
font-weight: normal;
|
||||
letter-spacing: 2px;
|
||||
font-weight: 550;
|
||||
text-shadow: -4px -4px 10px #3B8ED4;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,6 +2,7 @@ import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { SmallBorderConfig } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
|
||||
export const option = {
|
||||
colors: ['#1089ff', '#0000ff'],
|
||||
@ -12,6 +13,6 @@ export default class Config extends PublicConfigClass implements CreateComponent
|
||||
public key = SmallBorderConfig.key
|
||||
public chartConfig = cloneDeep(SmallBorderConfig)
|
||||
public option = cloneDeep(option)
|
||||
|
||||
public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 300, zIndex: 1 }
|
||||
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -2,6 +2,7 @@ import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { TopAlarmsConfig } from './index'
|
||||
import dataJson from './data.json'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
export const option = {
|
||||
dataset: dataJson.source,
|
||||
title: '未处置报警数TOP5',
|
||||
@ -15,14 +16,15 @@ export const option = {
|
||||
dropdownOptions: ['当日', '当月', '当年'],
|
||||
dropdownDefault: '当日',
|
||||
iconColor: '#00E5FF',
|
||||
letterSpacing: 1,
|
||||
letterSpacing:2,
|
||||
paddingX: 40,
|
||||
paddingY: -5,
|
||||
isShowButton: false
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = TopAlarmsConfig.key
|
||||
public chartConfig = TopAlarmsConfig
|
||||
public option = option
|
||||
|
||||
public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 300, zIndex: 1 }
|
||||
}
|
||||
|
||||
@ -3,6 +3,9 @@
|
||||
<div class="go-top-alarms">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<!-- <div class="title-prefix">
|
||||
<svg-icon icon-class="rocket" class="title-icon" :style="{ color: option.iconColor }"></svg-icon>
|
||||
</div> -->
|
||||
<div class="title-text">
|
||||
<span :style="{
|
||||
color: option.titleColor,
|
||||
@ -119,11 +122,25 @@ const handleSelect = (key: string) => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
// .title-prefix {
|
||||
// width: 40px;
|
||||
// height: 35px;
|
||||
// background-image: linear-gradient(to bottom, #2e69e0, #1e55a7);
|
||||
// clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
|
||||
// .title-icon {
|
||||
// font-size: 22px;
|
||||
// }
|
||||
// }
|
||||
|
||||
.title-text {
|
||||
height: 35px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// background-image: linear-gradient(to bottom, #17325f, #0e2142);
|
||||
padding: 0 20px 0 20px;
|
||||
margin-left: 0px;
|
||||
clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
|
||||
@ -173,8 +190,10 @@ const handleSelect = (key: string) => {
|
||||
'info value'
|
||||
'bar bar';
|
||||
align-items: center;
|
||||
// margin-right: 10px;
|
||||
padding: 0 10px;
|
||||
gap: 6px 15px;
|
||||
// background-color: antiquewhite;
|
||||
|
||||
.item-info {
|
||||
grid-area: info;
|
||||
@ -183,12 +202,14 @@ const handleSelect = (key: string) => {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
// background-color: yellowgreen;
|
||||
|
||||
.rank {
|
||||
font-weight: normal;
|
||||
margin-right: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// background-color: #fff;
|
||||
|
||||
.rank-icon {
|
||||
display: inline-block;
|
||||
@ -214,18 +235,22 @@ const handleSelect = (key: string) => {
|
||||
text-align: right;
|
||||
// font-size: 16px;
|
||||
font-weight: normal;
|
||||
// background-color: aquamarine;
|
||||
}
|
||||
|
||||
.progress-bar-wrapper {
|
||||
grid-area: bar;
|
||||
width: calc(100% - 60px);
|
||||
/* Adjust width to not overlap value */
|
||||
position: relative;
|
||||
left: 20px;
|
||||
/* Align with name */
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
// background-color: rgba(42, 58, 91, 0.5);
|
||||
border-radius: 1px;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
@ -38,9 +38,9 @@ export const option = {
|
||||
sceneNameColor: '#ffffff',
|
||||
sceneNameSize: 20,
|
||||
labelColor: '#B0E0E6',
|
||||
labelSize: 14,
|
||||
labelSize: 16,
|
||||
valueColor: '#ffffff',
|
||||
valueSize: 22,
|
||||
valueSize: 28,
|
||||
pointColor1: '#00E5FF',
|
||||
pointColor2: '#FFD700'
|
||||
}
|
||||
|
||||
@ -19,44 +19,37 @@
|
||||
</div>
|
||||
<div class="content">
|
||||
<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">
|
||||
<div class="metric-top-1">
|
||||
<div class="metric-label">
|
||||
<span
|
||||
:style="{ color: option.labelColor, fontSize: option.labelSize + 'px', marginLeft: 8 + 'px' }">场景总数</span>
|
||||
<div class="scene-name-1" :style="{ color: option.sceneNameColor, fontSize: option.sceneNameSize + 'px' }">危化品库</div>
|
||||
<div class="metrics-container">
|
||||
<div class="metric-top-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' }">262</div>
|
||||
</div>
|
||||
<div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">262
|
||||
<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 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 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-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">6852
|
||||
<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 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>
|
||||
@ -87,7 +80,6 @@ const option = computed(() => props.chartConfig.option)
|
||||
.go-workshop-scene {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 12px;
|
||||
@ -106,7 +98,7 @@ const option = computed(() => props.chartConfig.option)
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 35px;
|
||||
margin-left: 35px;
|
||||
margin-top: 5px;
|
||||
|
||||
.title-text {
|
||||
@ -135,8 +127,8 @@ const option = computed(() => props.chartConfig.option)
|
||||
.scene-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
height: 95px; // Taller rows
|
||||
padding: 0 25px;
|
||||
height: 120px; // Taller rows
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
@ -144,10 +136,10 @@ const option = computed(() => props.chartConfig.option)
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.scene-name-2 {
|
||||
margin-right: 95px;
|
||||
margin-right: 90px;
|
||||
margin-left: 25px;
|
||||
}
|
||||
|
||||
|
||||
.metrics-container {
|
||||
margin-right: auto;
|
||||
margin-left: 0;
|
||||
@ -203,8 +195,7 @@ const option = computed(() => props.chartConfig.option)
|
||||
margin: 0 30px;
|
||||
position: relative;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
&::before, &::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -2px;
|
||||
@ -213,11 +204,9 @@ const option = computed(() => props.chartConfig.option)
|
||||
background-color: #00E5FF;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: -1px;
|
||||
}
|
||||
@ -235,12 +224,7 @@ const option = computed(() => props.chartConfig.option)
|
||||
.metric-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 2px;
|
||||
|
||||
span {
|
||||
margin-bottom: -5px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
margin-bottom: 8px;
|
||||
|
||||
.point {
|
||||
width: 8px;
|
||||
@ -251,30 +235,28 @@ const option = computed(() => props.chartConfig.option)
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-weight: normal;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
left: 10px; // Visually center the value under the text
|
||||
left: 9px; // 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;
|
||||
left:70px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
@ -8,14 +8,12 @@ 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'
|
||||
|
||||
|
||||
export default [
|
||||
|
||||
SmallBorderConfig,
|
||||
AlarmListConfig,
|
||||
SceneDistributionConfig,
|
||||
TopAlarmsConfig,
|
||||
@ -27,5 +25,4 @@ export default [
|
||||
MaxTrimConfig,
|
||||
LineGraph01Config,
|
||||
LineGraph02Config,
|
||||
SmallBorderConfig
|
||||
]
|
||||
|
||||
@ -24,7 +24,7 @@ export const theme = {
|
||||
export const chartInitConfig = {
|
||||
x: 50,
|
||||
y: 50,
|
||||
w: 450,
|
||||
w: 500,
|
||||
h: 300,
|
||||
// 不建议动 offset
|
||||
offsetX: 0,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user