kanban-vue/src/views/quality/up1.vue

<template>
  <div id="up1">
    <div class="bg-color-black">
      <div class="d-flex pt-1 pl-2 jc-center">
        <span class="fs-xxxl text mx-2 fw-b">近7天来料合格率</span>
      </div>
      <div class="body-box">
        <div class="pt-2 " >
          <Bottom1Chart :linedata="linedata" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Bottom1Chart from "../../components/warehousechart/bottom1Chart";
import {mapState} from "vuex";
export default {
  components: {
    Bottom1Chart
  },
  computed: {
    //数组写法
    ...mapState(['user','factoryoptions','factory']),
  },
  data() {
    return {
      colorList: {
        linearYtoG: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#f5b44d'
            },
            {
              offset: 1,
              color: '#28f8de'
            }
          ]
        },
        linearGtoB: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#43dfa2'
            },
            {
              offset: 1,
              color: '#28f8de'
            }
          ]
        },
        linearBtoG: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#1c98e8'
            },
            {
              offset: 1,
              color: '#28f8de'
            }
          ]
        },
        areaBtoG: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(35,184,210,.2)'
            },
            {
              offset: 1,
              color: 'rgba(35,184,210,0)'
            }
          ]
        }
      },
      linedata :{
        series : null,
        xAxiss  :null,
        interval :15,
        min:0
      },
      timing:null,
    }
  },
  mounted() {
    this.refreshdata()
  },
  beforeDestroy () {
    clearInterval(this.timing)
  },
  methods: {
    refreshdata() {
      this.getdata(); //获取-数据
      this.timing = setInterval(() => {
        this.getdata(); //获取--数据
      }, 10000);
    },

    async getdata() {
      var caller = 'KB!WHTMONTHIQCRATE';
      var cond = "1=1";
      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",{
        params: {
          condition: cond
        }
      }).then((result)=>{
        let dataList = JSON.parse(result.data.data);
        let series = new Array();
        let xAxis0 = new Array();
        let mindata = 100;
        let ndata = new Array();
        for (let index = 0; index < dataList.length; index++) {
          const element = dataList[index];
          xAxis0.push(element.v_ymd);
          ndata.push(element.v_okrate);
          if(mindata>element.v_okrate){
            mindata = element.v_okrate;
          }
        }
        //7天内
        /* let ndata = new Array();
         for (let i =6 ;i>=0;i--){
           let formattedDate;
           if(i == 0){
             formattedDate = this.$moment().format('MM/DD');
           }else{
             formattedDate = this.$moment().subtract(i, 'days').format('MM/DD')
           }
           xAxis0.push(formattedDate);
           //获取分组当天数据
           let dataall = dataList;
           let data0 = '-';
           if(null != dataall) {
             let datam = dataall.filter(item => item.v_ymd == formattedDate);
             if(datam.length>0){
               data0 = datam[0].v_okrate;
               if(mindata>data0){
                 mindata = data0;
               }
             }
           }
           ndata.push(data0);
         }*/
        series.push({
          name: '合格率',
          type: 'line',
          data: ndata,
          symbolSize: 4,
          lineStyle: {
            normal: {
              color: this.colorList.linearBtoG,
              width: 4
            }
          },
          label: {
            show: true,
            position: 'top',
            fontSize:15,
            color:'inherit',
            fontWeight: "bold"
          },
          emphasis: {
            focus: 'series'
          },
          areaStyle: {
            normal: {
              color: this.colorList.areaBtoG
            }
          },
        });
        this.linedata.series = series;
        this.linedata.xAxiss = xAxis0;
        //最小值往下取整10的倍数，然后减20
        mindata = Math.floor(mindata/10)*10 - 20;
        mindata = mindata<0?0:mindata;
        this.linedata.min = mindata;
        //分7个数据，6段
        this.linedata.interval = Math.ceil((100-mindata)/7);
          },(result)=>{
            console.error(result)
          }
      );
    }
  }
};
</script>

<style lang="scss" class>
//$box-height: 520px;
$box-height: 475px;
$box-width: 100%;
#up1 {
  padding: 13px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;
  .bg-color-black {
    height: $box-height - 25px;
    border-radius: 10px;
    padding: 5px ;
  }
  .body-box {
    border-radius: 10px;
    overflow: hidden;
  }
}
</style>