更新优化

helongyang

5 天以前 753361f589444455fe1b20476c658201ccd92c38

 ´úÂë¹ÜÀí/LargeScreen/CP-Screen/src/views/indexs/station-two.vue

@@ -1,463 +1,97 @@
<!--
 * @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: {},
  <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 {
      pageflag: true,
      options: {}, // å­˜å‚¨ ECharts é…ç½®
      timer: null // å®šæ—¶å™¨æ ‡è¯†
    };
  },
  created() {
    this.getData();
  },
  methods: {
    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', // é¼ æ ‡æ‚¬æµ®æç¤ºï¼Œè§¦å‘方式为“item”（针对饼图扇区）
        },
        
        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, 
          },
        ],
      };
    },
    filters: {
      numsFilter(msg) {
        return msg || 0;
      },
    // è½®è¯¢ï¼ˆæ¯éš”一天请求一次数据）
    switper() {
      if (this.timer) return;
      // æ¯éš”一天（86400000 æ¯«ç§’）执行一次 getData
      this.timer = setInterval(() => { 
        this.getData();
      }, 86400000); 
    },
    created() {
      this.getData();
    },
    mounted() {
      this.init();
    },
    beforeDestroy() {
      this.clearData();
    },
    methods: {
      init() {
        let dataPie = [

    {
        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,

                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: {
            color: '#00b5f3',
            fontSize: 12,
            
        },
        subtextStyle: {
            align: 'center',
            fontSize: 18,
            color: ['#85c7e3'],
            fontWeight:800
        },
        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")

        },
        textStyle: {
            lineHeight: 20,
            color: '#9ed2f5',

        },
    },
    grid: {
        left: '1%', // ä¸Žå®¹å™¨å·¦ä¾§çš„距离
        right: '1%', // ä¸Žå®¹å™¨å³ä¾§çš„距离
        top: '1%', // ä¸Žå®¹å™¨é¡¶éƒ¨çš„距离
        bottom: '1%', // ä¸Žå®¹å™¨åº•éƒ¨çš„距离

    },
    series: [
        {
            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%'],
            hoverAnimation: false,
            label: {
                normal: {
                    show: 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: '',
            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%'],
            hoverAnimation: false,
            label: {
                normal: {
                    show: false,
                }
            },

            data: baseDataPie
        },

    ]
};
        this.switper();
      },
      //轮询
      switper() {
        if (this.timer) {
          return;
        }
        let looper = (a) => {
          this.getData();
        };
        this.timer = setInterval(
          looper,
          this.$store.state.setting.echartsAutoTime
        );
      },
    },
  };
  </script>
  <style lang='scss' scoped>
  .user_Overview {
    li {
      flex: 1;
  
      p {
        text-align: center;
        height: 16px;
        font-size: 16px;
      }
  
      .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");
        }
      }
  },
  beforeDestroy() {
    // ç»„件销毁时清除定时器
    if (this.timer) { 
      clearInterval(this.timer);
      this.timer = null;
    }
  },
  mounted() {
    this.switper(); // æŒ‚载后启动定时器
  }
  </style>
};
</script>

<style lang='scss' scoped>
/* è‹¥æ— éœ€ç‰¹æ®Šæ ·å¼ï¼Œå¯ç®€åŒ–或删除 */
</style>