更新

helongyang

2025-06-05 fe77f3c9d11e3087c1efa56fd6205ffc10e39991

 ´úÂë¹ÜÀí/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>
};
</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>