From 753361f589444455fe1b20476c658201ccd92c38 Mon Sep 17 00:00:00 2001
From: helongyang <647556386@qq.com>
Date: 星期三, 30 七月 2025 09:53:19 +0800
Subject: [PATCH] 更新优化
---
代码管理/LargeScreen/CP-Screen/src/views/indexs/station-two.vue | 340 ++++++++++++--------------------------------------------
1 files changed, 74 insertions(+), 266 deletions(-)
diff --git "a/\344\273\243\347\240\201\347\256\241\347\220\206/LargeScreen/CP-Screen/src/views/indexs/station-two.vue" "b/\344\273\243\347\240\201\347\256\241\347\220\206/LargeScreen/CP-Screen/src/views/indexs/station-two.vue"
index d3a1ef8..0762388 100644
--- "a/\344\273\243\347\240\201\347\256\241\347\220\206/LargeScreen/CP-Screen/src/views/indexs/station-two.vue"
+++ "b/\344\273\243\347\240\201\347\256\241\347\220\206/LargeScreen/CP-Screen/src/views/indexs/station-two.vue"
@@ -1,289 +1,97 @@
<template>
- <div class="tech-chart-container">
- <Echart
- :options="options"
- :autoresize="true"
- style="width: 100%; height: 100%"
- />
+ <div id="name" style="width: 100%; height: 100%">
+ <!-- 娓叉煋 ECharts 楗煎浘 -->
+ <Echart :options="options" style="width: 100%; height: 100%"></Echart>
</div>
</template>
<script>
+import { currentGET } from "api/modules";
import { GetCPLargeStockCount } from "@/api/http.js";
import * as echarts from 'echarts';
export default {
data() {
return {
- options: {
- backgroundColor: 'transparent',
- title: {
- text: '鎴愬搧浜у搧搴撳瓨鎬绘暟',
- subtext: '鍔犺浇涓�...',
- textStyle: {
- color: '#00b5f3',
- fontSize: 14,
- },
- subtextStyle: {
- align: 'center',
- fontSize: 28,
- color: '#4be1ff',
- fontWeight: 'bold',
- textShadow: '0 0 15px rgba(75, 225, 255, 0.7)'
- },
- x: 'center',
- y: 'center',
- },
- tooltip: {
- show: false // 瀹屽叏绂佺敤tooltip
- },
- series: [
- {
- name: '搴撳瓨鏁伴噺',
- type: 'pie',
- radius: ['65%', '85%'],
- center: ['50%', '50%'],
- hoverAnimation: false, // 绂佺敤鎮仠鍔ㄧ敾
- silent: true, // 绂佺敤鎵�鏈変氦浜�
- label: {
- show: false
- },
- labelLine: {
- show: false
- },
- itemStyle: {
- borderWidth: 0,
- shadowBlur: 20,
- shadowColor: 'rgba(0, 150, 255, 0.5)'
- },
- data: [{
- value: 0,
- name: '',
- itemStyle: {
- // 闈掕摑鑹插埌钃濈櫧鑹叉笎鍙橈紝娣诲姞鍔ㄦ�佹晥鏋�
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- { offset: 0, color: '#00ffcc' },
- { offset: 0.5, color: '#00b4ff' },
- { offset: 1, color: '#0062ff' }
- ],
- global: false
- }
- }
- }]
- },
- // 娣诲姞澶栧彂鍏夊渾鐜�
- {
- type: 'pie',
- radius: ['85%', '87%'],
- center: ['50%', '50%'],
- hoverAnimation: false,
- silent: true,
- label: { show: false },
- labelLine: { show: false },
- itemStyle: {
- // 闈掕摑鑹插埌钃濈櫧鑹叉笎鍙橈紝娣诲姞鍔ㄦ�佹晥鏋�
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- { offset: 0, color: '#00ffcc' },
- { offset: 0.5, color: '#00b4ff' },
- { offset: 1, color: '#0062ff' }
- ],
- global: false
- }
- },
- data: [{
- value: 1,
- name: ''
- }]
- },
- // 娣诲姞鍐呭彂鍏夊渾鐜�
- {
- type: 'pie',
- radius: ['63%', '65%'],
- center: ['50%', '50%'],
- hoverAnimation: false,
- silent: true,
- label: { show: false },
- labelLine: { show: false },
- itemStyle: {
- // 闈掕摑鑹插埌钃濈櫧鑹叉笎鍙橈紝娣诲姞鍔ㄦ�佹晥鏋�
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- { offset: 0, color: '#00ffcc' },
- { offset: 0.5, color: '#00b4ff' },
- { offset: 1, color: '#0062ff' }
- ],
- global: false
- }
- },
- data: [{
- value: 1,
- name: ''
- }]
- },
- // 娣诲姞鍔ㄦ�佺矑瀛愭晥鏋�
- {
- type: 'scatter',
- coordinateSystem: 'none',
- data: this.generateParticles(30),
- symbolSize: (val) => {
- return val[2] * 2;
- },
- itemStyle: {
- color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
- { offset: 0, color: 'rgba(0, 255, 255, 0.8)' },
- { offset: 1, color: 'rgba(0, 255, 255, 0)' }
- ])
- },
- // 娣诲姞绮掑瓙闂儊鏁堟灉
- effect: {
- show: true,
- period: 2,
- trailLength: 0.1,
- symbol: 'circle',
- symbolSize: 0
- }
- }
- ]
- },
- timer: null,
- particleTimer: null,
- gradientTimer: null
+ pageflag: true,
+ options: {}, // 瀛樺偍 ECharts 閰嶇疆
+ timer: null // 瀹氭椂鍣ㄦ爣璇�
};
},
- mounted() {
- this.fetchData();
- this.startAutoRefresh();
- this.startParticleAnimation();
- this.startGradientAnimation();
- },
- beforeDestroy() {
- this.stopAutoRefresh();
- this.stopParticleAnimation();
- this.stopGradientAnimation();
+ created() {
+ this.getData();
},
methods: {
- generateParticles(count) {
- const particles = [];
- for (let i = 0; i < count; i++) {
- const angle = Math.random() * Math.PI * 2;
- const radius = 0.7 + Math.random() * 0.2;
- particles.push([
- Math.cos(angle) * radius,
- Math.sin(angle) * radius,
- Math.random() * 2 + 1
- ]);
- }
- return particles;
+ async getData() {
+ const rep = await GetCPLargeStockCount();
+ // 缁勮楗煎浘鏁版嵁锛歔{value: 鏁伴噺, name: 浜у搧缂栫爜}, ...]
+ const pieData = rep.map(item => ({
+ value: item.qtys,
+ name: item.pCode
+ }));
+ // 璁＄畻鎬诲拰锛岀敤浜庤绠楃櫨鍒嗘瘮
+ const total = pieData.reduce((acc, cur) => acc + cur.value, 0);
+ // 閰嶇疆 ECharts 楗煎浘
+ this.options = {
+ backgroundColor: '#000',
+ tooltip: {
+ trigger: 'item', // 榧犳爣鎮诞鎻愮ず锛岃Е鍙戞柟寮忎负鈥渋tem鈥濓紙閽堝楗煎浘鎵囧尯锛�
+ },
+
+ series: [
+ {
+ name: '瀹㈡埛浠ｇ爜',
+ type: 'pie',
+ radius: ['40%', '70%'], // 楗煎浘鍐呭鍗婂緞锛屽疄鐜扮幆褰�/鎵囧舰鏁堟灉
+ center: ['50%', '50%'], // 楗煎浘鍦ㄥ鍣ㄤ腑鐨勪腑蹇冧綅缃�
+ color: [
+ 'rgba(135,183,255, 1)', // 瀵瑰簲绀轰緥楗煎浘棰滆壊锛屽彲鎸夐渶璋冩暣
+ 'rgba(248,195,248, 1)',
+ 'rgba(100,255,249, 1)',
+ 'rgba(100,255,249, 1)',
+ 'rgba(248,195,248, 1)'
+ ],
+ label: {
+ show: true,
+ position: 'outside',
+ textStyle: {
+ color: '#b3ccf8',
+ fontSize: 14,
+ fontFamily: 'PingFangSC-Regular'
+ },
+ // 鏍煎紡鍖栨爣绛撅紝鏄剧ず鍚嶇О鍜岀櫨鍒嗘瘮
+ formatter: (params) => {
+ const percent = ((params.value / total) * 100).toFixed(2) + '%';
+ return `${params.name}\n${percent}`;
+ }
+ },
+ data: pieData,
+ },
+ ],
+ };
},
- async fetchData() {
- try {
- const response = await GetCPLargeStockCount({});
- const stockCount = response.stockCount || 0;
- this.updateChart(stockCount);
- } catch (error) {
- console.error('鑾峰彇搴撳瓨鎬绘暟澶辫触:', error);
- this.options.title.subtext = '鏁版嵁寮傚父';
- this.options.title.subtextStyle.color = '#ff4d4f';
- }
+ // 杞锛堟瘡闅斾竴澶╄姹備竴娆℃暟鎹級
+ switper() {
+ if (this.timer) return;
+ // 姣忛殧涓�澶╋紙86400000 姣锛夋墽琛屼竴娆� getData
+ this.timer = setInterval(() => {
+ this.getData();
+ }, 86400000);
},
- updateChart(count) {
- this.options.series[0].data[0].value = count;
- this.options.title.subtext = count + '绉�';
- this.options.title.subtextStyle.color = count > 0? '#4be1ff' : '#ff4d4f';
- },
- startAutoRefresh() {
- this.stopAutoRefresh();
- this.timer = setInterval(() => {
- this.fetchData();
- }, 3000);
- },
- stopAutoRefresh() {
- if (this.timer) clearInterval(this.timer);
- },
- startParticleAnimation() {
- this.stopParticleAnimation();
- this.particleTimer = setInterval(() => {
- this.options.series[3].data = this.generateParticles(30);
- this.options = {...this.options }; // 瑙﹀彂瑙嗗浘鏇存柊
- }, 2000);
- },
- stopParticleAnimation() {
- if (this.particleTimer) clearInterval(this.particleTimer);
- },
- startGradientAnimation() {
- this.stopGradientAnimation();
- this.gradientTimer = setInterval(() => {
- const offset = Math.random();
- this.options.series.forEach(series => {
- if (series.itemStyle.color.type === 'linear') {
- series.itemStyle.color.colorStops.forEach(stop => {
- stop.offset = (stop.offset + offset) % 1;
- });
- }
- });
- this.options = {...this.options }; // 瑙﹀彂瑙嗗浘鏇存柊
- }, 1000);
- },
- stopGradientAnimation() {
- if (this.gradientTimer) clearInterval(this.gradientTimer);
+ },
+ beforeDestroy() {
+ // 缁勪欢閿�姣佹椂娓呴櫎瀹氭椂鍣�
+ if (this.timer) {
+ clearInterval(this.timer);
+ this.timer = null;
}
+ },
+ mounted() {
+ this.switper(); // 鎸傝浇鍚庡惎鍔ㄥ畾鏃跺櫒
}
};
</script>
-<style lang="scss" scoped>
-.tech-chart-container {
- width: 100%;
- height: 100%;
- position: relative;
- background: radial-gradient(circle at center, #021228 0%, #000810 100%);
- border-radius: 8px;
- overflow: hidden;
- box-shadow: 0 0 30px rgba(0, 100, 255, 0.2);
-
- &::before {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background:
- radial-gradient(circle at 20% 30%, rgba(0, 150, 255, 0.1) 0%, transparent 50%),
- radial-gradient(circle at 80% 70%, rgba(0, 200, 255, 0.1) 0%, transparent 50%);
- z-index: 0;
- animation: pulse 8s infinite alternate;
- }
-}
-
-@keyframes pulse {
- 0% {
- opacity: 0.3;
- }
- 100% {
- opacity: 0.7;
- }
-}
-
-::v-deep .echarts {
- position: relative;
- z-index: 1;
-}
+<style lang='scss' scoped>
+/* 鑻ユ棤闇�鐗规畩鏍峰紡锛屽彲绠�鍖栨垨鍒犻櫎 */
</style>
\ No newline at end of file
--
Gitblit v1.9.3