zncx-ui/src/views/DailyPerOutput.vue

<!--
 描述: 酷屏首页模板
 作者: anni
 日期: 2024-10-30
-->

<template>
    <div class="home-container">
      <div class="wrap" ref="editor">
        <div class="wrap-container sn-container"> 
          <div class="sn-content"> 
            <div class="sn-title">{{ time }} <span style="color:#ff9829">{{ name }}</span> 日人均产出</div> 
            <div class="sn-body"> 
              <div class="wrap-container"> 
                <div class="chartsdom" id="chart_work"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="wrap-container sn-container sn-container-bottom"> 
          <div class="sn-content"> 
            <div class="sn-title">{{ time }} <span style="color:#ff9829">{{ name }}</span> 每日工作人数</div> 
            <div class="sn-body"> 
              <div class="wrap-container"> 
                <div class="chartsdom" id="chart_ptrend"></div>
              </div>
            </div>
          </div>
        </div>  
      </div>
    </div>
  </template>
  
  <script>
  import { screenSize } from '@/assets/js/utils';
  import { getWorkerQty } from "@/api/index";
  import { timeFormateMonth } from "@/utils/timeFormate";
  
  export default {
  name: "pyramidTrend",
  data() {
    return {
      name: '',
      option: null,
      dataMap: [],
      data: [],
      time: '',
      timelineData: [],
      allData: {}
    }
  },
  watch: {
    name(newVal) {
      this.loadData(newVal);
    }
  },
  async mounted() {
    await this.getData();

    screenSize(this.$refs.editor);

    this.time = timeFormateMonth(new Date());

    this.loadData(this.name);
  },
  //s
  methods: {
    /** 获取列表数据 */
    async getData() {
      this.timelineData = [];
      await getWorkerQty().then(res => {
        if (res.data) {
          Object.keys(res.data).forEach((key) => {
            this.allData = res.data;
            this.timelineData.push(key)
          })
          // this.name = this.timelineData[0];
          this.name = '智能线';
        }
      }).catch();
    },
    /** 数据加载处理 */
    loadData(val) {
      let arr = [];
      this.workData = [];
      this.data = [];
      this.dataMap = []
      Object.keys(this.allData[val]).forEach((key) => {
        arr.push({
          time: key.split('-')[2],
          num: parseInt(this.allData[val][key]['人均产出']),
          people: this.allData[val][key]['每日工作人数']
        });
      })
      arr.sort((a, b) => {
          return a.time - b.time
      })
      arr.forEach((item) => {
        this.workData.push(item.num);
        this.data.push(item.people);
        this.dataMap.push(item.time)
      })

      this.getWorkEchart();
      this.getEchart();
    },
    getWorkEchart() {
      let myWorkChart = echarts.init(document.getElementById('chart_work'));
      let itemStyle = {
        barBorderRadius: [15, 0],
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#7bff80'
        },{
          offset: 1,
          color: '#7bff80a6'
        }])
      }

      this.option = {
        baseOption: {
          timeline: {
            axisType: 'category',
            autoPlay: false,
            loop: true,
            playInterval: 60000,
            data: this.timelineData,
            left: 180,
            right: 180,
            bottom: -100,
            lineStyle: {
              show: true,
              color: '#179bf1'
            },
            label: {
              show: true,
              color: '#fff',
              fontSize: 16
            },
            checkpointStyle: {
              show: true,
              color: '#ff9232', 
              symbolSize: 0,
              borderColor: '#ff923282',
              borderWidth: 5,
            },
            controlStyle: {
              show: false,
            }
          },
          calculable: true,
          grid: {
            top: '20%',
            bottom: '10%'
          },
          xAxis: [{
            type: 'category',
            name: '日',
            nameTextStyle: {
                fontSize: 24
            },
            axisLabel: {
              margin: 10,
              interval: 0,
              fontSize: 16,
              color: '#E2E5FF'
            },
            data: this.dataMap,
            splitLine: { 
              show: false 
            },
            axisTick: {
              show: true
            }, 
            axisLine: {
              show: true,
              lineStyle: {
                color: '#E2E5FF',
              }
            },
          }],
          yAxis: [{
            type: 'value',
            name: '双',
            nameTextStyle: {
                fontSize: 30
            },
            axisLabel: {
              margin: 20,
              interval: 0,
              fontSize: 24,
              color: '#E2E5FF'
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: true
            }, 
            axisLine: {
              show: true,
              lineStyle: {
                color: '#E2E5FF'
              }
            }
          }],
          series: [{
            type: 'bar',
            barWidth: 20,
            legendHoverLink: true,
            label: {
              show: true,
              position: 'top',
              color: '#fff',
              fontSize: 16
            },
          }]
        },
        options: [{
          series: [{
            data: this.workData,
            itemStyle: itemStyle
          }]
        }]
      }

      // let _this = this;
      // myWorkChart.on('timelinechanged', function (params) {
      //   _this.name = _this.timelineData[params.currentIndex];
      // })

      myWorkChart.setOption(this.option, true);

      window.addEventListener('resize', () => {
        myWorkChart.resize();
      });

      this.timer = setInterval(() => {
          this.getData();
      }, 1800000)
    },
    getEchart() {
      let myChart = echarts.init(document.getElementById('chart_ptrend'));
      let itemStyle = {
        barBorderRadius: [15, 0],
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#ff4343',
          // color: '#7bff80',
          // color: '#ff95e7'
        },{
          offset: 1,
          color: '#ff7b7bad'
          // color: '#7bff80a6',
          // color: '#ff95e7bd'
        }])
      }

      this.option = {
        baseOption: {
          timeline: {
            axisType: 'category',
            autoPlay: false,
            playInterval: 60000,
            // data: ['第一周', '第二周', '第三周', '第四周'],
            left: 80,
            right: 80,
            bottom: 10,
            lineStyle: {
              show:false,
              color: '#179bf1'
            },
            label: {
              show: true,
              color: '#fff',
              fontSize: '24'
            },
            checkpointStyle: {
              color: '#ff9232', 
              symbolSize: 10,
              borderColor: '#ff923282',
              borderWidth: 5,
            },
            controlStyle: {
              show: false,
            }, 
            itemStyle: {
              borderColor: '#004b85',
              borderWidth: 2,
              shadowColor: 'rgba(1, 216, 225, 0.5)',
              shadowBlur: 20
            }
          },
          calculable: true,
          grid: {
            top: '20%',
            bottom: '10%'
          },
          xAxis: [{
            type: 'category',
            name: '日',
            nameTextStyle: {
                fontSize: 24
            },
            axisLabel: {
              margin: 18,
              interval: 0,
              fontSize: 16,
              color: '#E2E5FF'
            },
            data: this.dataMap,
            splitLine: { 
              show: false 
            },
            axisTick: {
              show: true
            }, 
            axisLine: {
              show: true,
              lineStyle: {
                color: '#E2E5FF',
              }
            },
          }],
          yAxis: [{
            type: 'value',
            name: '人',
            minInterval: 1,
            nameTextStyle: {
                fontSize: 30
            },
            axisLabel: {
              margin: 20,
              interval: 0,
              fontSize: 24,
              color: '#E2E5FF'
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: true
            }, 
            axisLine: {
              show: true,
              lineStyle: {
                color: '#E2E5FF'
              }
            }
          }],
          series: [{
            type: 'bar',
            barWidth: 20,
            legendHoverLink: true,
            label: {
              show: true,
              position: 'top',
              color: '#fff',
              fontSize: 20
            },
          }]
        },
        options: [{
          series: [{
            data: this.data,
            itemStyle: itemStyle
          }]
        }]
      }

      myChart.setOption(this.option, true);

      window.addEventListener('resize', () => {
        myChart.resize();
      });
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
};
</script>

<style lang="scss" scoped>

.sn-container {
  left: 3%;
  top: 4%;
  width: 94%;
  height: 44%;
  .chartsdom {
    width: 100%;
    height: 90%;
    position: absolute;
    bottom: 4%;
  }

  .sn-title {
    position: absolute;
    height: 50px;
    font-size: 40px;
    color: #7becff;
    line-height: 50px;
    padding: 0 0 0 30px;
    left: 26px;
    right: 10px;
    top: 16px;
  }
}
.sn-container-bottom {
  left: 3%;
  top: 52%;
  width: 94%;
  height: 44%;
  .chartsdom {
    width: 100%;
    height: 90%;
  }
}
.home-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .wrap {
    transform-origin: 0px 0px 0px;
    background: url(../assets/img/bj.jpg) no-repeat;
    // background: url(../assets/img/brand/bg.jpg) no-repeat;
    background-size: contain;
    background-position: 50% 0;
    background-color: rgb(0, 0, 0);
    min-width: auto;
    width: 1920px;
    min-height: auto;
    height: 1080px;
    overflow: hidden;
    .top {
      position: absolute;
      left: 0; 
      top: 0; 
      width: 100%; 
      height: 80px; 
      background-color: transparent; 
      background: url(../assets/img/top_nav.png) no-repeat; 
      background-position: 65% 0;
      border: none; 
      overflow: hidden;

      h1 {
        font-size: 36px;
        color: rgb(216, 255, 255);
        text-align: center;
        line-height: 70px;
        -webkit-text-stroke: 2px #193d8f;
      }
    }

    header {
      position: relative;
      height: 80px;
      background: url(../assets/img/brand/head_bg2.png) no-repeat top center;
      // background: url(../assets/img/top_nav.png) no-repeat top center;
      background-size: 100% 100%;
      h2 {
        color: #ffffff;
        font-size: 34px;
        text-align: center;
        line-height: 80px;
        letter-spacing: 4px;
        -webkit-text-stroke: 2px #193d8f;
      }
      .weather {
        position: absolute;
        left: 10px;
        top: 10px;
        font-size: 14px;
        color: rgba(126, 240, 255, .7);
        img {
          width: 20px;
        }
        span {
          display: inline-block;
        }
        .tem {
          margin: 0 10px 0 .2rem;
        }
      }
      .showTime {
        position: absolute;
        right: 50px;
        top: 40px;
        color: rgba(145, 233, 255, 0.801);
        display: flex;
        .time {
          font-size: 26px;
          margin-right: 30px;
        }
        .date {
          span {
            &:nth-child(1) {
              font-size: 18px;
              margin-right: 14px;
            }
            &:nth-child(2) {
              font-size: 20px;
            }
          }
        }
      }
    }

    .divider {
      position: absolute;
      left: 50px;
      top: 3253px;
      width: 90%;
      height: 50px;
      width: 300px;
      border: none;
      background: transparent;
    }

  }
}	
  </style>