更新

helongyang

2025-06-05 fe77f3c9d11e3087c1efa56fd6205ffc10e39991

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

@@ -1,568 +1,187 @@
<!--
 * @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>
    <Echart 
      :options="options" 
      style="width: 100%; height: 100%"
      v-if="!loading"
    />
    <div v-else style="color: white; text-align: center; padding-top: 50px">
      æ•°æ®åŠ è½½ä¸­...
    </div>
    <div v-if="error" style="color: red; text-align: center; padding-top: 50px">
      æ•°æ®åŠ è½½å¤±è´¥: {{ error }}
    </div>
  </div>
</template>

<script>
import { currentGET } from "api/modules";
import { ProLocationStatistics } from "@/api/http.js";
import { GetProWeekTasks } from "@/api/http.js";
import * as echarts from 'echarts';
let style = {
  fontSize: 24,
};

export default {
  data() {
    return {
      pageflag: true,
      myChart: {},
      options: {},
      loading: false,
      error: null,
      timer: null
    };
  },
  filters: {
    numsFilter(msg) {
      return msg || 0;
    },
  },
  created() {
    this.getData();
  },
  mounted() {
    this.init();
    this.fetchData();
    this.startAutoRefresh();
  },
  beforeDestroy() {
    this.clearData();
    this.stopAutoRefresh();
  },
  methods: {
    init() {
    initEmptyChart() {
      this.options = {
     //浮动框
     tooltip: {},
     //图例
     legend: {
         right: '12%',
         bottom: '4%',
         textStyle: {
             color: '#fff',
             fontSize: '13'
         },
         itemGap: 20,
         itemWidth: 10,
         itemHeight: 10,
         icon: 'circle',
         data: ['PM2.5', 'CO2', 'SO']
     },
     grid: {
         left: '8%',
         top: '15%',
         bottom: '14%',
         width: '86%',
     },
     visualMap: [{
         type: 'piecewise',
         show: false,
         pieces: [{
             gt: 0,
             lte: 60,
             color: '#69dbf7'
         }, {
             gte: 60,
             color: '#e5421b'
         }],
         seriesName: 'SO',
         seriesIndex: 2
     }, {
         type: 'piecewise',
         show: false,
         pieces: [{
             gt: 0,
             lte: 60,
             color: '#1be57a'
         }, {
             gte: 60,
             color: '#e5421b'
         }],
         seriesName: 'CO2',
         seriesIndex: 1
     }, {
         type: 'piecewise',
         show: false,
         pieces: [{
             gt: 0,
             lte: 60,
             color: '#feb01e'
         }, {
             gte: 60,
             color: '#e5421b'
         }],
         seriesName: 'PM2.5',
         seriesIndex: 0
     }, {
         type: 'piecewise',
         show: false,
         pieces: [{
             gt: 0,
             lte: 60,
             color: '#69dbf7'
         }, {
             gte: 60,
             color: '#e5421b'
         }],
         seriesName: 'SO',
         seriesIndex: 5
     }, {
         type: 'piecewise',
         show: false,
         pieces: [{
             gt: 0,
             lte: 60,
             color: '#1be57a'
         }, {
             gte: 60,
             color: '#e5421b'
         }],
         seriesName: 'CO2',
         seriesIndex: 4
     }, {
         type: 'piecewise',
         show: false,
         pieces: [{
             gt: 0,
             lte: 60,
             color: '#feb01e'
         }, {
             gte: 60,
             color: '#e5421b'
         }],
         seriesName: 'PM2.5',
         seriesIndex: 3
     }],
     //xè½´
     xAxis: {
         axisLine: {
             lineStyle: {
                 color: '#132987'
             }
         },
         axisLabel: {
             textStyle: {
                 color: '#FFF',
                 fontSize: 12
             },
         },
         //刻度线
         axisTick: {
             show: false
         },
         //坐标轴显示值
         data: ["1时", "2时", "3时", "4时", "5时", "6时", "7时", "8时"]
     },
     //yè½´
     yAxis: {
         min: 0,
         max: 100,
         axisLabel: { //  æ”¹å˜y轴字体颜色和大小
             //formatter: '{value} m³ ', //  ç»™y轴添加单位
             textStyle: {
                 color: '#fff',
                 fontSize: 12,
             },
         },
         //坐标轴线
         axisLine: {
             show: false,
         },
         //刻度线
         axisTick: {
             show: false
         },
         //在grid区域中的分隔线
         splitLine: {
             show: true,
             lineStyle: {
                 color: '#132987',
             }
         },
     },

     //
     series: [{
         name: 'PM2.5',
         type: 'line',
         symbolSize: [0, 0],
         itemStyle: {
             color: '#feb01e'
         },
         data: [43, 50, 41, 18, 28, 25, 26, 40],
     }, {
         name: 'CO2',
         type: 'line',
         symbolSize: [0, 0],
         itemStyle: {
             color: '#1be57a'
         },
         data: [21, 30, 37, 39, 23, 37, 5, 50]
     }, {
         name: 'SO',
         type: 'line',
         symbolSize: [0, 0],
         itemStyle: {
             color: '#69dbf7'
         },
         data: [76, 58, 60, 38, 49, 59, 78, 60]
     }, { //水波纹点
         name: 'PM2.5',
         type: 'effectScatter',
         symbolSize: [5, 5],
         rippleEffect: {
             period: 1,
             scale: 4,
             brushType: 'fill'
         },
         itemStyle: {
             color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                 offset: 0,
                 color: '#feb01e'
             }, {
                 offset: 1,
                 color: 'rgba(254,176,30,.3)'
             }])
         },
         data: [43, 50, 41, 18, 28, 25, 26, 40]

     }, { //水波纹点
         name: 'CO2',
         type: 'effectScatter',
         symbolSize: [5, 5],
         rippleEffect: {
             period: 1,
             scale: 4,
             brushType: 'fill'
         },
         itemStyle: {
             color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                 offset: 0,
                 color: '#1be57a'
             }, {
                 offset: 1,
                 color: 'rgba(27,229,122,.3)'
             }])
         },
         data: [21, 30, 37, 39, 23, 37, 5, 50]

     }, { //水波纹点
         name: 'SO',
         type: 'effectScatter',
         symbolSize: [5, 5],
         rippleEffect: {
             period: 1,
             scale: 4,
             brushType: 'fill'
         },
         itemStyle: {
             color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                 offset: 0,
                 color: '#69dbf7'
             }, {
                 offset: 1,
                 color: '#aefbc3'
             }])
         },
         markLine: {
             symbol: "none",
             label: {
                 normal: {
                     show: false,
                 }
             },
             lineStyle: {
                 type: "solid",
                 color: 'rgba(210,56,56,.6)',
                 width: 2
             },
             data: [{
                 yAxis: 60
             }]
         },
         data: [76, 58, 60, 38, 49, 59, 78, 60]

     }]
 };
    },
    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 ProLocationStatistics();
      this.options = {
     //浮动框
     tooltip: {},
     //图例
     legend: {
         right: '12%',
         bottom: '4%',
         textStyle: {
             color: '#fff',
             fontSize: '13'
         },
         itemGap: 20,
         itemWidth: 10,
         itemHeight: 10,
         icon: 'circle',
         data: ['成品入库', '成品出库', '成品回框']
     },
     grid: {
         left: '8%',
         top: '15%',
         bottom: '14%',
         width: '86%',
     },
     visualMap: [{
         type: 'piecewise',
         show: false,
         pieces: [{
             gt: 0,
             lte: 60,
             color: '#69dbf7'
         }, {
             gte: 60,
             color: '#e5421b'
         }],
         seriesName: '成品入库',
         seriesIndex: 2
     }, {
         type: 'piecewise',
         show: false,
         pieces: [{
             gt: 0,
             lte: 60,
             color: '#1be57a'
         }, {
             gte: 60,
             color: '#e5421b'
         }],
         seriesName: '成品出库',
         seriesIndex: 1
     }, {
         type: 'piecewise',
         show: false,
         pieces: [{
             gt: 0,
             lte: 60,
             color: '#feb01e'
         }, {
             gte: 60,
             color: '#e5421b'
         }],
         seriesName: '成品回框',
         seriesIndex: 0
     }],
     //xè½´
     xAxis: {
         axisLine: {
             lineStyle: {
                 color: '#132987'
             }
         },
         axisLabel: {
             textStyle: {
                 color: '#FFF',
                 fontSize: 12
             },
         },
         //刻度线
         axisTick: {
             show: false
         },
         //坐标轴显示值
         data: ["04/19", "04/20", "04/21", "04/22", "04/23", "04/24", "04/25"]
     },
     //yè½´
     yAxis: {
         axisLabel: { //  æ”¹å˜y轴字体颜色和大小
             //formatter: '{value} m³ ', //  ç»™y轴添加单位
             textStyle: {
                 color: '#fff',
                 fontSize: 12,
             },
         },
         //坐标轴线
         axisLine: {
             show: false,
         },
         //刻度线
         axisTick: {
             show: false
         },
         //在grid区域中的分隔线
         splitLine: {
             show: true,
             lineStyle: {
                 color: '#132987',
             }
         },
     },

     //
     series: [{
         name: '成品入库',
         type: 'line',
         symbolSize: [0, 0],
         itemStyle: {
             color: '#feb01e'
         },
         data: [160, 156, 150, 180, 170, 200, 20],
     }, {
         name: '成品出库',
         type: 'line',
         symbolSize: [0, 0],
         itemStyle: {
             color: '#1be57a'
         },
         data: [80, 115, 120, 130, 91, 99,  20]
     }, {
         name: '成品回框',
         type: 'line',
         symbolSize: [0, 0],
         itemStyle: {
             color: '#69dbf7'
         },
         data: [70, 113, 118, 111, 89, 99,  32]
     }, { //水波纹点
         name: '成品入库',
         type: 'effectScatter',
         symbolSize: [5, 5],
         rippleEffect: {
             period: 1,
             scale: 4,
             brushType: 'fill'
         },
         itemStyle: {
             color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                 offset: 0,
                 color: '#feb01e'
             }, {
                 offset: 1,
                 color: 'rgba(254,176,30,.3)'
             }])
         },
         data: [160, 156, 150, 180, 170, 200,  20]

     }, { //水波纹点
         name: '成品出库',
         type: 'effectScatter',
         symbolSize: [5, 5],
         rippleEffect: {
             period: 1,
             scale: 4,
             brushType: 'fill'
         },
         itemStyle: {
             color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                 offset: 0,
                 color: '#1be57a'
             }, {
                 offset: 1,
                 color: 'rgba(27,229,122,.3)'
             }])
         },
         data: [80, 115, 120, 130, 91, 99,  20]

     }, { //水波纹点
         name: '成品回框',
         type: 'effectScatter',
         symbolSize: [5, 5],
         rippleEffect: {
             period: 1,
             scale: 4,
             brushType: 'fill'
         },
         itemStyle: {
             color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                 offset: 0,
                 color: '#69dbf7'
             }, {
                 offset: 1,
                 color: '#aefbc3'
             }])
         },
         markLine: {
             symbol: "none",
             label: {
                 normal: {
                     show: false,
                 }
             },
             lineStyle: {
                 type: "solid",
                 color: 'rgba(210,56,56,.6)',
                 width: 2
             },
             data: [{
                 yAxis: 60
             }]
         },
         data: [70, 113, 118, 111, 89, 99, 32]

     }]
 };
      this.switper();
    },
    //轮询
    switper() {
      if (this.timer) {
        return;
      }
      let looper = (a) => {
        this.getData();
        tooltip: {
          trigger: 'axis',
          formatter: params => {
            let result = `${params[0].axisValue}<br>`;
            params.forEach(item => {
              result += `${item.marker} ${item.seriesName}: ${item.value}<br>`;
            });
            return result;
          }
        },
        legend: {
          right: '12%',
          bottom: '4%',
          textStyle: {
            color: '#fff',
            fontSize: '13'
          },
          itemGap: 20,
          itemWidth: 10,
          itemHeight: 10,
          icon: 'circle',
          data: ['成品入库', '成品出库', '空框回流', '成品回库']
        },
        grid: {
          left: '8%',
          top: '15%',
          bottom: '14%',
          width: '86%',
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#132987'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#FFF',
              fontSize: 12
            },
          },
          axisTick: {
            show: false
          },
          data: ['加载中...']
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: 12,
            },
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#132987',
            }
          },
        },
        series: [
          { name: '成品入库', type: 'line', data: [] },
          { name: '成品出库', type: 'line', data: [] },
          { name: '空框回流', type: 'line', data: [] },
          { name: '成品回库', type: 'line', data: [] }
        ]
      };
      this.timer = setInterval(
        looper,
        this.$store.state.setting.echartsAutoTime
      );
    },
  },
    async fetchData() {
       this.loading = true;
      this.error = null;
      
      try {
        console.log('正在请求数据...');
        const response = await GetProWeekTasks({});
        console.log('完整响应:', response); // æ‰“印完整响应查看结构
        
        // ç›´æŽ¥ä½¿ç”¨response作为数据（根据实际响应结构调整）
        if (!response || !response.dateRange || !response.dailyStatistics) {
          throw new Error('数据格式不正确');
        }
        
        this.updateChart(response); // ç›´æŽ¥ä¼ å…¥response，而非response.data
      } catch (error) {
        console.error('获取数据错误:', error);
        this.error = error.message;
        this.initEmptyChart();
      } finally {
        this.loading = false;
      }
    },
    updateChart(data) {
      
      
      const dates = data.dateRange;
      const stats = data.dailyStatistics;
      
      const seriesData = {
        '成品入库': [],
        '成品出库': [],
        '空框回流': [],
        '成品回库': []
      };
      
      // æ ¹æ®å®žé™…数据格式调整字段名（小写开头）
      stats.forEach(day => {
        seriesData['成品入库'].push(day.inProduct || 0);
        seriesData['成品出库'].push(day.outProduct || 0);
        seriesData['空框回流'].push(day.emptyProductBack || 0);
        seriesData['成品回库'].push(day.inProductBack || 0);
      });
      
      this.options = {
        ...this.options,
        xAxis: {
          ...this.options.xAxis,
          data: dates
        },
        series: this.options.series.map(series => ({
          ...series,
          data: seriesData[series.name] || []
        }))
      };
    },
    startAutoRefresh() {
      this.stopAutoRefresh();
      this.timer = setInterval(() => {
        this.fetchData();
      }, this.$store.state.setting.echartsAutoTime || 10000);
    },
    stopAutoRefresh() {
      if (this.timer) clearInterval(this.timer);
    }
  }
};
</script>

<style lang='scss' scoped>
.user_Overview {
  li {