From a21fa00f093d22105830b45fa46f8bac368c56fb Mon Sep 17 00:00:00 2001 From: btobab Date: Thu, 18 Dec 2025 09:40:45 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BE=8E=E5=8C=96=E9=A6=96=E9=A1=B5=E5=92=8C?= =?UTF-8?q?=E5=BD=93=E5=89=8D=E5=BA=93=E5=AD=98=E9=A1=B5=E9=9D=A2,=20?= =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A1=B6=E9=83=A8=E6=A0=8Ftitle=E5=92=8Clogo?= =?UTF-8?q?=E4=B8=BA=E5=88=A9=E5=BE=B7=E5=B0=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zbf-ui/src/assets/images/ldr_logo.png | Bin 0 -> 7913 bytes zbf-ui/src/layout/components/Navbar.vue | 21 +- zbf-ui/src/views/leader.vue | 820 ++++++++-- zbf-ui/src/views/system/tMiStock/index.vue | 1609 ++++++++++++++++---- 4 files changed, 2027 insertions(+), 423 deletions(-) create mode 100644 zbf-ui/src/assets/images/ldr_logo.png diff --git a/zbf-ui/src/assets/images/ldr_logo.png b/zbf-ui/src/assets/images/ldr_logo.png new file mode 100644 index 0000000000000000000000000000000000000000..a36cf8827d903753feb439bad567c907eb50708b GIT binary patch literal 7913 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 - - 技术创新中心-{{ this.deptLabel }} + + 利德尔-技术创新中心-{{ this.deptLabel }}
@@ -157,7 +161,20 @@ export default { // { month: '三月', values: [40, 50, 60, 70] }, // 添加更多月份数据... ], - barColors: ['#4B96FF', '#41D9D9', '#de8226', '#FFC442','#c5229f','#63CF7E','#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0'], + barColors: [ + { start: '#667eea', end: '#764ba2' }, // 紫色渐变 + { start: '#f093fb', end: '#f5576c' }, // 粉红渐变 + { start: '#4facfe', end: '#00f2fe' }, // 蓝青渐变 + { start: '#43e97b', end: '#38f9d7' }, // 绿青渐变 + { start: '#fa709a', end: '#fee140' }, // 橙黄渐变 + { start: '#30cfd0', end: '#330867' }, // 深蓝渐变 + { start: '#a8edea', end: '#fed6e3' }, // 粉绿渐变 + { start: '#ff6b6b', end: '#feca57' }, // 红黄渐变 + { start: '#5f27cd', end: '#341f97' }, // 深紫渐变 + { start: '#48dbfb', end: '#0abde3' }, // 亮蓝渐变 + { start: '#1dd1a1', end: '#10ac84' }, // 绿色渐变 + { start: '#ee5a6f', end: '#c44569' } // 玫瑰渐变 + ], centerNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], // maintenanceCenters: [], @@ -212,6 +229,74 @@ export default { getTooltipContent(monthData, index) { return `${this.centerNames[index]}: ${monthData.values[index]}%`; }, + // 获取通用图表配置 + getCommonChartConfig() { + return { + animation: true, + animationDuration: 1000, + animationEasing: 'cubicOut', + animationDelay: (idx) => idx * 100, + tooltip: { + trigger: 'axis', + backgroundColor: 'rgba(10, 22, 40, 0.95)', + borderColor: 'rgba(75, 150, 255, 0.5)', + borderWidth: 1, + textStyle: { + color: '#fff', + fontSize: 14 + }, + padding: [12, 16], + extraCssText: 'backdrop-filter: blur(10px); box-shadow: 0 4px 20px rgba(0,0,0,0.6); border-radius: 8px;' + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true + }, + xAxis: { + axisLine: { + lineStyle: { + color: 'rgba(255, 255, 255, 0.2)', + width: 1 + } + }, + axisLabel: { + color: 'rgba(255, 255, 255, 0.7)', + fontSize: 12 + }, + splitLine: { + show: false + } + }, + yAxis: { + axisLine: { + lineStyle: { + color: 'rgba(255, 255, 255, 0.2)', + width: 1 + } + }, + axisLabel: { + color: 'rgba(255, 255, 255, 0.7)', + fontSize: 12 + }, + splitLine: { + lineStyle: { + color: 'rgba(255, 255, 255, 0.08)', + type: 'dashed' + } + } + } + }; + }, + // 获取渐变色 + getGradientColor(colorIndex) { + const colors = this.barColors[colorIndex % this.barColors.length]; + return new echarts.graphic.LinearGradient(0, 1, 0, 0, [ + { offset: 0, color: colors.start }, + { offset: 1, color: colors.end } + ]); + }, async fetchData() { this.loading = true; try { @@ -362,13 +447,18 @@ export default { roundCap: true, clip: false, itemStyle: { - color: '#4B96FF' + color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [ + { offset: 0, color: '#4facfe' }, + { offset: 1, color: '#00f2fe' } + ]), + shadowBlur: 20, + shadowColor: 'rgba(79, 172, 254, 0.8)' } }, axisLine: { lineStyle: { - width: 8, - color: [[1, 'rgba(75, 150, 255, 0.1)']] + width: 10, + color: [[1, 'rgba(255, 255, 255, 0.1)']] } }, splitLine: {show: false}, @@ -382,11 +472,15 @@ export default { } }], detail: { - fontSize: 14, + fontSize: 16, color: '#fff', + fontWeight: 700, formatter: '{value}%' } - }] + }], + animation: true, + animationDuration: 2000, + animationEasing: 'elasticOut' }; chart.setOption(option); this.charts.push(chart); @@ -405,16 +499,21 @@ export default { radius: '100%', progress: { show: true, - width: 18, + width: 20, itemStyle: { - color: '#4B96FF' + color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [ + { offset: 0, color: '#4facfe' }, + { offset: 1, color: '#00f2fe' } + ]), + shadowBlur: 20, + shadowColor: 'rgba(79, 172, 254, 0.8)' } }, pointer: { show: false }, axisLine: { lineStyle: { - width: 18, - color: [[1, 'rgba(75, 150, 255, 0.1)']] + width: 20, + color: [[1, 'rgba(255, 255, 255, 0.1)']] } }, axisTick: { show: false }, @@ -424,70 +523,109 @@ export default { valueAnimation: true, formatter: '{value}%', color: '#fff', - fontSize: 24, + fontSize: 28, + fontWeight: 700, offsetCenter: [0, '20%'] }, data: [{ value: data, name: '预算使用率', title: { - offsetCenter: [0, '80%'] + offsetCenter: [0, '80%'], + color: 'rgba(255, 255, 255, 0.7)', + fontSize: 14 } }] - }] + }], + animation: true, + animationDuration: 2000, + animationEasing: 'elasticOut' }; chart.setOption(option); this.charts.push(chart); }, initMonthlyPurchaseChart() { const chart = echarts.init(this.$refs.monthlyPurchaseChart); + const commonConfig = this.getCommonChartConfig(); + const option = { + ...commonConfig, tooltip: { - trigger: 'axis' + ...commonConfig.tooltip, + axisPointer: { + type: 'shadow', + shadowStyle: { + color: 'rgba(75, 150, 255, 0.1)' + } + } }, legend: { data: ['入库金额', '出库金额'], - textStyle: { color: '#fff' } - }, - grid: { - left: '3%', - right: '4%', - bottom: '3%', - containLabel: true + textStyle: { + color: '#fff', + fontSize: 14 + }, + itemWidth: 20, + itemHeight: 12, + itemGap: 20 }, xAxis: { + ...commonConfig.xAxis, type: 'category', data: Object.keys(this.monthlyPurchaseData), - axisLine: { - lineStyle: { color: '#ffffff30' } - }, axisLabel: { - color: '#fff', + ...commonConfig.xAxis.axisLabel, rotate: 45 } }, yAxis: { - type: 'value', - axisLine: { - lineStyle: { color: '#ffffff30' } - }, - splitLine: { - lineStyle: { color: '#ffffff10' } - }, - axisLabel: { color: '#fff' } + ...commonConfig.yAxis, + type: 'value' }, series: [ { name: '入库金额', type: 'bar', data: Object.values(this.monthlyPurchaseData).map(item => item[0][0]), - itemStyle: { color: '#4B96FF' } + barWidth: '35%', + itemStyle: { + color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ + { offset: 0, color: '#667eea' }, + { offset: 1, color: '#764ba2' } + ]), + borderRadius: [8, 8, 0, 0], + shadowBlur: 10, + shadowColor: 'rgba(102, 126, 234, 0.5)', + shadowOffsetY: 3 + }, + emphasis: { + itemStyle: { + shadowBlur: 20, + shadowColor: 'rgba(102, 126, 234, 0.8)' + } + } }, { name: '出库金额', type: 'bar', data: Object.values(this.monthlyPurchaseData).map(item => item[1][0]), - itemStyle: { color: '#41D9D9' } + barWidth: '35%', + itemStyle: { + color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ + { offset: 0, color: '#4facfe' }, + { offset: 1, color: '#00f2fe' } + ]), + borderRadius: [8, 8, 0, 0], + shadowBlur: 10, + shadowColor: 'rgba(79, 172, 254, 0.5)', + shadowOffsetY: 3 + }, + emphasis: { + itemStyle: { + shadowBlur: 20, + shadowColor: 'rgba(79, 172, 254, 0.8)' + } + } } ] }; @@ -496,58 +634,71 @@ export default { }, initSixMonthChart() { const chart = echarts.init(this.$refs.sixMonthChart); + const commonConfig = this.getCommonChartConfig(); const now = new Date(); const currentMonth = now.getMonth(); const months = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']; const xAxisData = Array.from({ length: 6 }, (_, i) => months[(currentMonth - i -1+ 12) % 12]); const option = { + ...commonConfig, tooltip: { - trigger: 'axis' - }, - grid: { - left: '3%', - right: '4%', - bottom: '3%', - containLabel: true + ...commonConfig.tooltip, + axisPointer: { + type: 'cross', + lineStyle: { + color: 'rgba(255, 255, 255, 0.3)', + type: 'dashed' + } + } }, xAxis: { + ...commonConfig.xAxis, type: 'category', boundaryGap: false, - data: [...xAxisData].reverse(), - axisLine: { - lineStyle: { color: '#ffffff30' } - }, - axisLabel: { color: '#fff' } + data: [...xAxisData].reverse() }, yAxis: { - type: 'value', - axisLine: { - lineStyle: { color: '#ffffff30' } - }, - splitLine: { - lineStyle: { color: '#ffffff10' } - }, - axisLabel: { color: '#fff' } + ...commonConfig.yAxis, + type: 'value' }, series: [{ data: [...this.sixMonthData].reverse(), type: 'line', smooth: true, symbol: 'circle', - symbolSize: 8, + symbolSize: 10, + showSymbol: true, + lineStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ + { offset: 0, color: '#4facfe' }, + { offset: 1, color: '#00f2fe' } + ]), + width: 4, + shadowBlur: 15, + shadowColor: 'rgba(79, 172, 254, 0.6)', + shadowOffsetY: 5 + }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: 'rgba(75, 150, 255, 0.3)' }, - { offset: 1, color: 'rgba(75, 150, 255, 0)' } + { offset: 0, color: 'rgba(79, 172, 254, 0.5)' }, + { offset: 1, color: 'rgba(79, 172, 254, 0.05)' } ]) }, - lineStyle: { - color: '#4B96FF', - width: 3 - }, itemStyle: { - color: '#4B96FF' + color: '#fff', + borderColor: '#4facfe', + borderWidth: 3, + shadowBlur: 15, + shadowColor: 'rgba(79, 172, 254, 1)' + }, + emphasis: { + scale: true, + scaleSize: 15, + itemStyle: { + shadowBlur: 25, + shadowColor: 'rgba(79, 172, 254, 1)' + } } }] }; @@ -588,53 +739,86 @@ export default { }, initMonthlyInOutChart() { const chart = echarts.init(this.$refs.monthlyInOutChart); + const commonConfig = this.getCommonChartConfig(); + const option = { + ...commonConfig, tooltip: { - trigger: 'axis' + ...commonConfig.tooltip, + axisPointer: { + type: 'shadow', + shadowStyle: { + color: 'rgba(75, 150, 255, 0.1)' + } + } }, legend: { data: ['入库金额', '出库金额'], - textStyle: { color: '#fff' } - }, - grid: { - left: '3%', - right: '4%', - bottom: '3%', - containLabel: true + textStyle: { + color: '#fff', + fontSize: 14 + }, + itemWidth: 20, + itemHeight: 12, + itemGap: 20 }, xAxis: { + ...commonConfig.xAxis, type: 'category', data: Object.keys(this.monthlyInOutData), - axisLine: { - lineStyle: { color: '#ffffff30' } - }, axisLabel: { - color: '#fff', + ...commonConfig.xAxis.axisLabel, rotate: 45 } }, yAxis: { - type: 'value', - axisLine: { - lineStyle: { color: '#ffffff30' } - }, - splitLine: { - lineStyle: { color: '#ffffff10' } - }, - axisLabel: { color: '#fff' } + ...commonConfig.yAxis, + type: 'value' }, series: [ { name: '入库金额', type: 'bar', data: Object.values(this.monthlyInOutData).map(item => item[1]), - itemStyle: { color: '#4B96FF' } + barWidth: '35%', + itemStyle: { + color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ + { offset: 0, color: '#43e97b' }, + { offset: 1, color: '#38f9d7' } + ]), + borderRadius: [8, 8, 0, 0], + shadowBlur: 10, + shadowColor: 'rgba(67, 233, 123, 0.5)', + shadowOffsetY: 3 + }, + emphasis: { + itemStyle: { + shadowBlur: 20, + shadowColor: 'rgba(67, 233, 123, 0.8)' + } + } }, { name: '出库金额', type: 'bar', data: Object.values(this.monthlyInOutData).map(item => item[0]), - itemStyle: { color: '#41D9D9' } + barWidth: '35%', + itemStyle: { + color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ + { offset: 0, color: '#f093fb' }, + { offset: 1, color: '#f5576c' } + ]), + borderRadius: [8, 8, 0, 0], + shadowBlur: 10, + shadowColor: 'rgba(240, 147, 251, 0.5)', + shadowOffsetY: 3 + }, + emphasis: { + itemStyle: { + shadowBlur: 20, + shadowColor: 'rgba(240, 147, 251, 0.8)' + } + } } ] }; @@ -695,32 +879,82 @@ export default { })); const option = { tooltip: { - trigger: 'item' + trigger: 'item', + backgroundColor: 'rgba(10, 22, 40, 0.95)', + borderColor: 'rgba(75, 150, 255, 0.5)', + borderWidth: 1, + textStyle: { + color: '#fff', + fontSize: 14 + }, + padding: [12, 16], + extraCssText: 'backdrop-filter: blur(10px); box-shadow: 0 4px 20px rgba(0,0,0,0.6); border-radius: 8px;', + formatter: '{b}
{c}万元 ({d}%)' }, - // legend: { - // orient: 'vertical', - // right: '5%', - // top: 'center', - // textStyle: { color: '#fff' } - // }, series: [ { type: 'pie', - radius: ['50%', '90%'], + radius: ['45%', '75%'], center: ['50%', '50%'], - data: dataArray, + roseType: 'radius', itemStyle: { - color: function(params) { - const colors = ['#4B96FF', '#41D9D9', '#63CF7E', '#FFC442', '#FF7D7D']; - return colors[params.dataIndex % colors.length]; + borderRadius: 10, + borderColor: 'rgba(10, 22, 40, 0.5)', + borderWidth: 3, + shadowBlur: 20, + shadowColor: 'rgba(0, 0, 0, 0.5)', + color: (params) => { + const gradients = [ + { start: '#667eea', end: '#764ba2' }, + { start: '#4facfe', end: '#00f2fe' }, + { start: '#43e97b', end: '#38f9d7' }, + { start: '#fa709a', end: '#fee140' }, + { start: '#30cfd0', end: '#330867' } + ]; + const idx = params.dataIndex % gradients.length; + return new echarts.graphic.LinearGradient(0, 0, 1, 1, [ + { offset: 0, color: gradients[idx].start }, + { offset: 1, color: gradients[idx].end } + ]); } }, label: { color: '#fff', - formatter: '{b}: {c}', - } + fontSize: 14, + fontWeight: 600, + formatter: '{b}\n{c}万元', + lineHeight: 20, + shadowBlur: 5, + shadowColor: 'rgba(0, 0, 0, 0.8)' + }, + labelLine: { + lineStyle: { + color: 'rgba(255, 255, 255, 0.4)', + width: 2 + }, + smooth: 0.3, + length: 20, + length2: 30 + }, + emphasis: { + scale: true, + scaleSize: 10, + itemStyle: { + shadowBlur: 35, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.9)' + }, + label: { + fontSize: 16, + fontWeight: 700 + } + }, + data: dataArray } - ] + ], + animation: true, + animationDuration: 2000, + animationEasing: 'cubicOut' }; chart.setOption(option); this.charts.push(chart); @@ -808,30 +1042,104 @@ export default {