style:首页图标修改

main
黄伟杰 3 weeks ago
parent e4184c65a2
commit d04bb8659d

@ -244,7 +244,7 @@ v-model="deviceOverviewRange" type="daterange" unlink-panels value-format="YYYY-
<el-card shadow="never">
<template #header>
<div class="h-3 flex justify-between">
<span>模具分类统计</span>
<span>模具分类统计取模具数量最多的前10项</span>
</div>
</template>
<Echart :options="moldTypeBarOptionsData" :height="260" />
@ -347,6 +347,18 @@ const loading = ref(true)
const avatar = userStore.getUser.avatar
const username = userStore.getUser.nickname
const getCssVar = (name: string, fallback: string) => {
if (typeof window === 'undefined') return fallback
const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
return v || fallback
}
const chartTitleColor = {
primary: getCssVar('--el-text-color-primary', '#303133'),
secondary: getCssVar('--el-text-color-secondary', '#909399'),
accent: getCssVar('--el-color-primary', '#409eff')
}
const productionOverviewRange = ref<string[]>([])
@ -393,18 +405,14 @@ const deviceStatusCards = ref<DeviceStatusVO[]>([])
const moldStatusCards = ref<DeviceStatusVO[]>([])
const formData = ref<DeviceOperationStatus>()
const deviceRepairLineOptions = ref<EChartsOption>({
title: {
text: '设备维修数量统计',
left: 'center'
},
tooltip: {
trigger: 'axis'
},
grid: {
left: 40,
right: 30,
bottom: 50,
top: 60,
bottom: 20,
top: 40,
containLabel: true
},
xAxis: {
@ -425,10 +433,6 @@ const deviceRepairLineOptions = ref<EChartsOption>({
]
})
const deviceCategoryPieOptionsData = ref<EChartsOption>({
title: {
text: '设备分类统计',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{b}{c}'
@ -441,8 +445,8 @@ const deviceCategoryPieOptionsData = ref<EChartsOption>({
{
name: '设备类别',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
radius: '65%',
center: ['55%', '50%'],
label: {
show: true,
formatter: '{b}{c}'
@ -453,8 +457,39 @@ const deviceCategoryPieOptionsData = ref<EChartsOption>({
const moldTypeBarOptionsData = ref<EChartsOption>({
title: {
text: '模具分类统计',
left: 'center'
left: 18,
top: 10,
textStyle: {
rich: {
bar: {
width: 4,
height: 16,
backgroundColor: chartTitleColor.accent,
borderRadius: 2
},
title: {
fontSize: 16,
fontWeight: 700,
lineHeight: 18,
color: chartTitleColor.primary
}
}
},
subtextStyle: {
rich: {
barSub: {
width: 4,
height: 12,
backgroundColor: chartTitleColor.accent,
borderRadius: 2
},
sub: {
fontSize: 12,
lineHeight: 14,
color: chartTitleColor.secondary
}
}
}
},
tooltip: {
trigger: 'axis',
@ -465,8 +500,8 @@ title: {
grid: {
left: 40,
right: 20,
bottom: 30,
top: 60,
bottom: 10,
top: 40,
containLabel: true
},
xAxis: {
@ -474,6 +509,16 @@ title: {
// data: ['', '', '', '', ''],
axisTick: {
alignWithLabel: true
},
axisLabel: {
rotate: 35,
interval: 0,
margin: 14,
color: chartTitleColor.secondary,
formatter: (value: string) => {
const v = String(value ?? '')
return v.length > 10 ? `${v.slice(0, 10)}` : v
}
}
},
yAxis: {

Loading…
Cancel
Save