From 30eb20ab1384b221801bbcff50ce6d05923dcd84 Mon Sep 17 00:00:00 2001
From: wangxinhui <wangxinhui@hnkhzn.com>
Date: 星期四, 05 六月 2025 09:21:37 +0800
Subject: [PATCH] Merge branch 'master' of http://115.159.85.185:8098/r/MeiRuiAn/HuaiAn
---
代码管理/LargeScreen/CP-Screen/src/views/indexs/station-two.vue | 710 ++++++++++++++++++++++------------------------------------
1 files changed, 268 insertions(+), 442 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 8c14a2d..d3a1ef8 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,463 +1,289 @@
-<!--
- * @Author: daidai
- * @Date: 2022-02-28 16:16:42
- * @LastEditors: Please set LastEditors
- * @LastEditTime: 2022-07-20 17:57:11
- * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
--->
<template>
- <div id="name" style="width: 100%; height: 100%">
- <Echart :options="options" style="width: 100%; height: 100%"></Echart>
- </div>
- </template>
-
- <script>
- import { currentGET } from "api/modules";
- import { ProductionStock } from "@/api/http.js";
- import * as echarts from 'echarts';
- let style = {
- fontSize: 24,
- };
- export default {
- data() {
- return {
- pageflag: true,
- myChart: {},
- options: {},
- };
- },
- filters: {
- numsFilter(msg) {
- return msg || 0;
- },
- },
- created() {
- this.getData();
- },
- mounted() {
- this.init();
- },
- beforeDestroy() {
- this.clearData();
- },
- methods: {
- init() {
- let dataPie = [
+ <div class="tech-chart-container">
+ <Echart
+ :options="options"
+ :autoresize="true"
+ style="width: 100%; height: 100%"
+ />
+ </div>
+</template>
- {
- value: 410,
- name: '浼佷笟'
- },
- {
- value: 380,
- name: '鏀垮簻'
- },
- {
- value: 501,
- name: '涓汉'
- },
-];
-let colorPie = ['#173852', '#0b2036', '#002e49'];
-let colorWrap = ['#3087d6', '#afe1ff', '#4be1ff'];
-let baseDataPie = [],
- baseDataWrap = [];
-for (var i = 0; i < dataPie.length; i++) {
- baseDataPie.push({
- value: dataPie[i].value,
- name: dataPie[i].name,
- itemStyle: {
- normal: {
- borderWidth: 50,
+<script>
+import { GetCPLargeStockCount } from "@/api/http.js";
+import * as echarts from 'echarts';
- borderColor: colorPie[i],
-
- }
- }
- });
- baseDataWrap.push({
- value: dataPie[i].value,
- name: dataPie[i].name,
- itemStyle: {
- normal: {
- color: colorWrap[i],
- borderWidth: 10,
- borderColor: colorWrap[i],
- shadowBlur: 50,
- shadowColor: 'rgba(48, 135, 214, 0.3)',
- }
- }
- }, {
- value: 10,
- name: '',
- itemStyle: {
- normal: {
- color: 'transparent',
- borderWidth: 10,
- borderColor: 'transparent',
-
- }
- }
- });
-}
-
-
-this.options = {
- backgroundColor: '#021228',
- title: {
- text: '鎶ヨ鎬绘暟',
- subtext: '10,225',
- textStyle: {
+export default {
+ data() {
+ return {
+ options: {
+ backgroundColor: 'transparent',
+ title: {
+ text: '鎴愬搧浜у搧搴撳瓨鎬绘暟',
+ subtext: '鍔犺浇涓�...',
+ textStyle: {
color: '#00b5f3',
- fontSize: 12,
-
- },
- subtextStyle: {
+ fontSize: 14,
+ },
+ subtextStyle: {
align: 'center',
- fontSize: 18,
- color: ['#85c7e3'],
- fontWeight:800
+ fontSize: 28,
+ color: '#4be1ff',
+ fontWeight: 'bold',
+ textShadow: '0 0 15px rgba(75, 225, 255, 0.7)'
+ },
+ x: 'center',
+ y: 'center',
},
- x: '38%',
- y: 'center',
- },
- tooltip: {
- show: true,
- trigger: 'item',
- formatter: "{a}锛歿b} <br/>鍗犳瘮锛歿d}%"
- },
- legend: {
- data: ['浼佷笟', '鏀垮簻', '涓汉'],
- icon: 'vertical',
- right: '1%',
- top: 'center',
- orient: 'vertical',
- itemGap: 20,
- itemWidth: 15,
- itemHeight: 8,
-
- formatter: function(name) {
- let target;
- for (let i = 0; i < dataPie.length; i++) {
- if (dataPie[i].name === name) {
- target = dataPie[i].value
- }
- }
- let arr = [name, target];
- return arr.join("\n")
-
+ tooltip: {
+ show: false // 瀹屽叏绂佺敤tooltip
},
- textStyle: {
- lineHeight: 20,
- color: '#9ed2f5',
-
- },
- },
- grid: {
- left: '1%', // 涓庡鍣ㄥ乏渚х殑璺濈
- right: '1%', // 涓庡鍣ㄥ彸渚х殑璺濈
- top: '1%', // 涓庡鍣ㄩ《閮ㄧ殑璺濈
- bottom: '1%', // 涓庡鍣ㄥ簳閮ㄧ殑璺濈
-
- },
- series: [
- {
- name: '',
+ series: [
+ {
+ name: '搴撳瓨鏁伴噺',
type: 'pie',
- clockWise: false, //椤烘椂鍔犺浇
- hoverAnimation: false, //榧犳爣绉诲叆鍙樺ぇ
- center: ['40%', '50%'],
- radius: ['80%', '81%'],
- tooltip: {
- show: false
- },
+ radius: ['65%', '85%'],
+ center: ['50%', '50%'],
+ hoverAnimation: false, // 绂佺敤鎮仠鍔ㄧ敾
+ silent: true, // 绂佺敤鎵�鏈変氦浜�
label: {
- normal: {
- show: false
- }
+ show: false
},
- data: baseDataWrap
- },
- {
-
- name: '鎶ヨ',
+ 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',
- color: colorPie,
- selectedMode: 'single',
- radius: ['55%', '58%'],
- center: ['40%', '50%'],
+ radius: ['85%', '87%'],
+ center: ['50%', '50%'],
hoverAnimation: false,
- label: {
- normal: {
- show: 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: baseDataPie
- },
-
- ]
-};
- },
- clearData() {
- if (this.timer) {
- clearInterval(this.timer);
- this.timer = null;
- }
- },
- async getData() {
- this.pageflag = true;
- // currentGET("big2").then((res) => {
- // if (!this.timer) {
- // console.log("璁惧鎬昏2", res);
- // }
- // if (res.success) {
- // this.userOverview = res.data;
- // this.onlineconfig = {
- // ...this.onlineconfig,
- // number: [1]
- // }
- // this.config = {
- // ...this.config,
- // number: [7]
- // }
- // this.offlineconfig = {
- // ...this.offlineconfig,
- // number: [4]
- // }
- // this.laramnumconfig = {
- // ...this.laramnumconfig,
- // number: [10]
- // }
- // this.switper();
- // } else {
- // this.pageflag = false;
- // this.$Message.warning(res.msg);
- // }
- // });
- // var rep = await ProductionStock();
- let dataPie = [
- {
- value: 430,
- name: '搴撳瓨浜у搧'
- },
-];
-let colorPie = ['#173852'];
-let colorWrap = ['#3087d6'];
-let baseDataPie = [],
- baseDataWrap = [];
-for (var i = 0; i < dataPie.length; i++) {
- baseDataPie.push({
- value: dataPie[i].value,
- name: dataPie[i].name,
- itemStyle: {
- normal: {
- borderWidth: 50,
-
- borderColor: colorPie[i],
-
- }
- }
- });
- baseDataWrap.push({
- value: dataPie[i].value,
- name: dataPie[i].name,
- itemStyle: {
- normal: {
- color: colorWrap[i],
- borderWidth: 10,
- borderColor: colorWrap[i],
- shadowBlur: 50,
- shadowColor: 'rgba(48, 135, 214, 0.3)',
- }
- }
- }, {
- value: 10,
- name: '',
- itemStyle: {
- normal: {
- color: 'transparent',
- borderWidth: 10,
- borderColor: 'transparent',
-
- }
- }
- });
-}
-
-
-this.options = {
- title: {
- text: '浜у搧鎬绘暟',
- subtext: '430',
- textStyle: {
- color: '#00b5f3',
- fontSize: 12,
-
- },
- subtextStyle: {
- align: 'center',
- fontSize: 18,
- color: ['#85c7e3'],
- fontWeight:800
- },
- x: '33%',
- y: 'center',
- },
- tooltip: {
- show: true,
- trigger: 'item',
- formatter: "{a}锛歿b} <br/>鍗犳瘮锛歿d}%"
- },
- legend: {
- data: ['搴撳瓨浜у搧'],
- icon: 'vertical',
- right: '1%',
- top: 'center',
- orient: 'vertical',
- itemGap: 20,
- itemWidth: 15,
- itemHeight: 8,
-
- formatter: function(name) {
- let target;
- for (let i = 0; i < dataPie.length; i++) {
- if (dataPie[i].name === name) {
- target = dataPie[i].value
- }
- }
- let arr = [name, target];
- return arr.join("\n")
-
- },
- textStyle: {
- lineHeight: 20,
- color: '#9ed2f5',
-
- },
- },
- grid: {
- left: '1%', // 涓庡鍣ㄥ乏渚х殑璺濈
- right: '1%', // 涓庡鍣ㄥ彸渚х殑璺濈
- top: '1%', // 涓庡鍣ㄩ《閮ㄧ殑璺濈
- bottom: '1%', // 涓庡鍣ㄥ簳閮ㄧ殑璺濈
-
- },
- series: [
- {
- name: '',
+ data: [{
+ value: 1,
+ name: ''
+ }]
+ },
+ // 娣诲姞鍐呭彂鍏夊渾鐜�
+ {
type: 'pie',
- clockWise: false, //椤烘椂鍔犺浇
- hoverAnimation: false, //榧犳爣绉诲叆鍙樺ぇ
- center: ['40%', '50%'],
- radius: ['80%', '81%'],
- tooltip: {
- show: false
- },
- label: {
- normal: {
- show: false
- }
- },
- data: baseDataWrap
- },
- {
-
- name: '绉嶇被',
- type: 'pie',
- color: colorPie,
- selectedMode: 'single',
- radius: ['55%', '58%'],
- center: ['40%', '50%'],
+ radius: ['63%', '65%'],
+ center: ['50%', '50%'],
hoverAnimation: false,
- label: {
- normal: {
- show: 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: baseDataPie
- },
-
- ]
-};
- this.switper();
+ 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
+ }
+ }
+ ]
},
- //杞
- switper() {
- if (this.timer) {
- return;
- }
- let looper = (a) => {
- this.getData();
- };
- this.timer = setInterval(
- looper,
- this.$store.state.setting.echartsAutoTime
- );
- },
+ timer: null,
+ particleTimer: null,
+ gradientTimer: null
+ };
+ },
+ mounted() {
+ this.fetchData();
+ this.startAutoRefresh();
+ this.startParticleAnimation();
+ this.startGradientAnimation();
+ },
+ beforeDestroy() {
+ this.stopAutoRefresh();
+ this.stopParticleAnimation();
+ this.stopGradientAnimation();
+ },
+ 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;
},
- };
- </script>
- <style lang='scss' scoped>
- .user_Overview {
- li {
- flex: 1;
-
- p {
- text-align: center;
- height: 16px;
- font-size: 16px;
+ 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';
}
-
- .user_Overview_nums {
- width: 100px;
- height: 100px;
- text-align: center;
- line-height: 100px;
- font-size: 22px;
- margin: 50px auto 30px;
- background-size: cover;
- background-position: center center;
- position: relative;
-
- &::before {
- content: "";
- position: absolute;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- }
-
- &.bgdonghua::before {
- animation: rotating 14s linear infinite;
- }
- }
-
- .allnum {
- // background-image: url("../../assets/img/left_top_lan.png");
- &::before {
- background-image: url("../../assets/img/left_top_lan.png");
- }
- }
-
- .online {
- &::before {
- background-image: url("../../assets/img/left_top_lv.png");
- }
- }
-
- .offline {
- &::before {
- background-image: url("../../assets/img/left_top_huang.png");
- }
- }
-
- .laramnum {
- &::before {
- background-image: url("../../assets/img/left_top_hong.png");
- }
- }
+ },
+ 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);
}
}
- </style>
\ No newline at end of file
+};
+</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>
\ No newline at end of file
--
Gitblit v1.9.3