ckt-kanban/src/views/scheduledBoard.vue

<template>
  <div class="container">
    <div style="width:100%;height: 25%;text-align:center;">
      <TimeC></TimeC>
      <div style="float: left;width: 25%;height: 100%;text-align:center;margin-left: 37% ">
        <div style="height: 40%;width: 100%;text-align: center;margin-top: 3%;">
          <label style="font-size: 30px;color: #ffffff">派工单完成情况</label>
        </div>
        <div style="height: 34%;width: 100%;margin-top: 10%">
          <div
                  style="width: 12%;height: 40%;float: left;margin-left: 5%;border-radius: 10px; background-color: #ec6566;"></div>
          <div style="width: 25%;height: 50%;float: left;margin-left: 3%;">
            <label style="font-size: 16px;color:#ffffff; ">未完工</label>
          </div>
          <div
                  style="width: 12%;height: 40%;float: left;margin-left: 8%;border-radius: 10px; background-color: #90ca75;"></div>
          <div style="width: 25%;height: 50%;float: left;margin-left: 3%;">
            <label style="font-size: 16px;color:#ffffff; ">已完工</label>
          </div>
        </div>
      </div>
    </div>
    <div style="width:100%;height: 40%;">
      <div id="pie0" style="float:left;margin-left: 0px;  margin-top: 0px; width: 33%; height:100%;"></div>
      <div id="pie1" style="float:left;margin-left: 0px;  margin-top: 0px; width: 33%; height:100%;"></div>
      <div id="pie2" style="float:left;margin-left: 0px;  margin-top: 0px; width: 33%; height:100%;"></div>
    </div>
    <div style="width:100%;height: 40%">
      <div id="pie3" style="float:left;margin-left: 0px;  margin-top: 0px; width: 33%; height:100%;"></div>
      <div id="pie4" style="float:left;margin-left: 0px;  margin-top: 0px; width: 33%; height:100%;"></div>
      <div id="pie5" style="float:left;margin-left: 0px;  margin-top: 0px; width: 33%; height:100%;"></div>
    </div>
  </div>
</template>

<script>
import TimeC from "./time"
export default {
  name: "scheduledBoard",
  data() {
    return {
      currentDate: null,
      stringdate: null,
      itemNum: null,
      myChart0: null,
      myChart1: null,
      myChart2: null,
      myChart3: null,
      myChart4: null,
      myChart5: null,
      countTimer: null,
      refreshTime: 30,
      loader: null,
      timer: null,
      handler: null,
      nextPage: null,
    }
  },
  components: {
    TimeC
  },
  methods: {
    load() {
      let that = this;
      $.ajax({
        url: "/board/getJumpConfig",
        type: "post",
        data: {"boardName": 'scheduledBoard'},
        dataType: "json",
        success: (data) => {
          if (data.rows2 != "" && data.rows2 != null) {
            that.nextPage = data.rows2;
            if (data.rows != "" && data.rows != null) {
              let jumpTime = Number(data.rows);
              if (jumpTime > 0) {
                that.countTimer = window.setTimeout(() => {
                  that.jump()
                }, 1000 * jumpTime);
              }
            }
          }
        }
      }).fail(() => {
        this.$router.push("/")
      })
    },

    jump() {
      clearTimeout(this.countTimer);
      clearInterval(this.loader);
      clearInterval(this.timer);
      clearInterval(this.handler);
      $.ajax({
        url: "/board/kanKanYouMeiYouDiaoXian",
        type: "post",
        data: {},
        dataType: "json",
        success: (data) => {
          this.$router.push(this.nextPage);
        }
      }).fail(() => {
        this.$router.push("/")
      })

    },

    getItemNoNumber() {
      let that = this;
      $.ajax({
        url: "/board/getBoardData",
        type: "POST",
        contentType: 'application/json;charset=utf-8',
        async: false,
        data: null,// 你的formid
        dataType: "JSON",
        success: (data) => {
          if (data.success) {
            that.itemNum = data.rows.length;
            /* console.log(itemNum)*/
          } else {
            alert(data.msg);
          }
        }
      });
    },

    load2() {
      let that = this;
      let timeout;
      if (that.itemNum == 0) {
        timeout = 1;
      } else {
        timeout = Math.ceil(that.itemNum / 6);
      }
      $.ajax({
        url: "/board/getRefreshTime",
        type: "post",
        data: {"boardName": 'scheduledBoard'},
        dataType: "json",
        success: (data) => {
          if (data.rows != "" && data.rows != null) {
            that.refreshTime = Number(data.rows);
            if(that.refreshTime ==0){
              that.refreshTime =5;
            }
          }
          that.loader = window.setInterval(() => {
            this.getBoardData()
          }, timeout * 1000 * this.refreshTime);
          that.getBoardData();

        },
      })
    },

    getBoardData() {
      $.ajax({
        url: "/board/getBoardData",
        type: "POST",
        contentType: 'application/json;charset=utf-8',
        async: false,
        data: null,// 你的formid
        dataType: "JSON",
        success: (data) => {
          if (data.success) {
            let data_temp = data.rows;
            this.boardLoading(data_temp);
          } else {
            this.jump();
          }
        },
        error: () => {
          this.jump();
        }
      });
    },

    boardLoading(data_temp) {
      let that = this
      that.doOne(data_temp);
      var x = 0;
      that.handler = setInterval(function () {

        that.myChart0.dispose();
        that.myChart0 = null;
        that.myChart1.dispose();
        that.myChart1 = null;
        that.myChart2.dispose();
        that.myChart2 = null;
        that.myChart3.dispose();
        that.myChart3 = null;
        that.myChart4.dispose();
        that.myChart4 = null;
        that.myChart5.dispose();
        that.myChart5 = null;

        for (let i = 6; i < 12 && i + x < data_temp.length; i++) {
          if (data_temp[i + x].percentage >= 100) {
            var color = '#90ca75';
          } else {
            var color = '#fff300';
          }
          // if (i == 6) {
          //
          //   that.myChart0.dispose();
          // } else if (i == 7) {
          //   that.myChart1.dispose();
          // } else if (i == 8) {
          //   that.myChart2.dispose();
          // } else if (i == 9) {
          //   that.myChart3.dispose();
          // } else if (i == 10) {
          //   that.myChart4.dispose();
          // } else if (i == 11) {
          //   that.myChart5.dispose();
          // }
          let option = ({
            title: [{
              text: '工序：' + data_temp[i + x].itemNo,
              // x 设置水平安放位置，默认左对齐，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
              x: 'center',
              // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
              y: 'bottom',
              // itemGap设置主副标题纵向间隔，单位px，默认为10，
              backgroundColor: '#EEE',
              // 主标题文本样式设置
              textStyle: {
                fontSize: 16,
                fontWeight: 'bolder',
                color: '#fff300'
              }
            },
              {
                text: data_temp[i + x].percentage + '%',
                // x 设置水平安放位置，默认左对齐，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
                x: 'center',
                // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
                y: 'center',
                // itemGap设置主副标题纵向间隔，单位px，默认为10，
                backgroundColor: 'rgba(0,0,0,0)',
                // 主标题文本样式设置
                textStyle: {
                  fontSize: 18,
                  fontWeight: 'bolder',
                  color: color
                },
              }],
            series: [
              {
                name: '完成数量统计',
                type: 'pie',    // 设置图表类型为饼图
                radius: ['40%', '70%'],  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                data: [          // 数据数组，name 为数据项名称，value 为数据项值
                  {value: data_temp[i + x].approveQty, name: ''},
                  {value: data_temp[i + x].unapproveQty, name: ''}
                ],
                color: ['#90ca75', '#ec6566'],
                labelLine: {
                  normal: {
                    show: false
                  }
                },
                label: {
                  normal: {
                    position: 'outer',  // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
                    // formatter: '{a} {b} : {c}个 ({d}%)'   设置标签显示内容 ，默认显示{b}
                    // {a}指series.name  {b}指series.data的name
                    // {c}指series.data的value  {d}%指这一部分占总数的百分比
                    formatter: '{b}'
                  }
                }
              }
            ]
          });
          if (i == 6) {
            that.myChart0 = echarts.init(document.getElementById('pie0'));
            that.myChart0.setOption(option);
          } else if (i == 7) {
            that.myChart1 = echarts.init(document.getElementById('pie1'));
            that.myChart1.setOption(option);
          } else if (i == 8) {
            that.myChart2 = echarts.init(document.getElementById('pie2'));
            that.myChart2.setOption(option);
          } else if (i == 9) {
            that.myChart3 = echarts.init(document.getElementById('pie3'));
            that.myChart3.setOption(option);
          } else if (i == 10) {
            that.myChart4 = echarts.init(document.getElementById('pie4'));
            that.myChart4.setOption(option);
          } else if (i == 11) {
            that.myChart5 = echarts.init(document.getElementById('pie5'));
            that.myChart5.setOption(option);
          }
        }
        x = Number(x) + 6;
        if (x + 6 >= data_temp.length) {
          /*console.log(x);*/
          clearInterval(that.handler);
        }
      }, 1000 * that.refreshTime)

    },
    doOne(data_temp) {
      for (let i = 0; i < 6 && i < data_temp.length; i++) {
        if (data_temp[i].percentage >= 100) {
          var color = '#90ca75';
        } else {
          var color = '#fff300';
        }
        if (i == 0) {
          if (this.myChart0) {
            this.myChart0.dispose();
          }
          // $("#pie0").removeAttr("_echarts_instance_").empty();
        } else if (i == 1) {
          if (this.myChart1) {
            this.myChart1.dispose();
          }
          // $("#pie1").removeAttr("_echarts_instance_").empty();
        } else if (i == 2) {
          if (this.myChart2) {
            this.myChart2.dispose();
          }
          // $("#pie2").removeAttr("_echarts_instance_").empty();
        } else if (i == 3) {
          if (this.myChart3) {
            this.myChart3.dispose();
          }
          // $("#pie3").removeAttr("_echarts_instance_").empty();
        } else if (i == 4) {
          if (this.myChart4) {
            this.myChart4.dispose();
          }
          // $("#pie4").removeAttr("_echarts_instance_").empty();
        } else if (i == 5) {
          if (this.myChart5) {
            this.myChart5.dispose();
          }
          // $("#pie5").removeAttr("_echarts_instance_").empty();
        }
        let option = ({
          title: [{
            text: '工序：' + data_temp[i].itemNo,
            // x 设置水平安放位置，默认左对齐，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
            x: 'center',
            // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
            y: 'bottom',
            // itemGap设置主副标题纵向间隔，单位px，默认为10，
            backgroundColor: '#EEE',
            // 主标题文本样式设置
            textStyle: {
              fontSize: 16,
              fontWeight: 'bolder',
              color: '#fff300'
            }
          },
            {
              text: data_temp[i].percentage + '%',
              // x 设置水平安放位置，默认左对齐，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
              x: 'center',
              // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
              y: 'center',
              // itemGap设置主副标题纵向间隔，单位px，默认为10，
              backgroundColor: 'rgba(0,0,0,0)',
              // 主标题文本样式设置
              textStyle: {
                fontSize: 18,
                fontWeight: 'bolder',
                color: color
              },
            }],
          series: [
            {
              name: '完成数量统计',
              type: 'pie',    // 设置图表类型为饼图
              radius: ['40%', '70%'],  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
              data: [          // 数据数组，name 为数据项名称，value 为数据项值
                {value: data_temp[i].approveQty, name: ''},
                {value: data_temp[i].unapproveQty, name: ''}
              ],
              color: ['#90ca75', '#ec6566'],
              labelLine: {
                normal: {
                  show: false
                }
              },
              label: {
                normal: {
                  position: 'outer',  // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
                  // formatter: '{a} {b} : {c}个 ({d}%)'   设置标签显示内容 ，默认显示{b}
                  // {a}指series.name  {b}指series.data的name
                  // {c}指series.data的value  {d}%指这一部分占总数的百分比
                  formatter: '{b}'
                }
              }
            }
          ]
        });
        // var myChart = echarts.init(document.getElementById('pie' + i));
        //
        // myChart.setOption(option);
        if (i == 0) {
          this.myChart0 = echarts.init(document.getElementById('pie0'));
          this.myChart0.setOption(option);
        } else if (i == 1) {
          this.myChart1 = echarts.init(document.getElementById('pie1'));
          this.myChart1.setOption(option);
        } else if (i == 2) {
          this.myChart2 = echarts.init(document.getElementById('pie2'));
          this.myChart2.setOption(option);
        } else if (i == 3) {
          this.myChart3 = echarts.init(document.getElementById('pie3'));
          this.myChart3.setOption(option);
        } else if (i == 4) {
          this.myChart4 = echarts.init(document.getElementById('pie4'));
          this.myChart4.setOption(option);
        } else if (i == 5) {
          this.myChart5 = echarts.init(document.getElementById('pie5'));
          this.myChart5.setOption(option);
        }
      }
    }
  },
  mounted() {

    this.load();
    this.getItemNoNumber();
    this.load2();

  },
  beforeDestroy() {
    clearInterval(this.handler);
    clearTimeout(this.countTimer);
    clearInterval(this.loader);

  },
  destroyed() {

      this.myChart0.clear()
      this.myChart0.dispose()
      this.myChart0 = null
      window.removeEventListener('resize', () => { this.myChart0.resize() })

      this.myChart1.clear()
      this.myChart1.dispose()
      this.myChart1 = null
      window.removeEventListener('resize', () => { this.myChart1.resize() })

      this.myChart2.clear()
      this.myChart2.dispose()
      this.myChart2 = null
      window.removeEventListener('resize', () => { this.myChart2.resize() })

      this.myChart3.clear()
      this.myChart3.dispose()
      this.myChart3 = null
      window.removeEventListener('resize', () => { this.myChart3.resize() })

      this.myChart4.clear()
      this.myChart4.dispose()
      this.myChart4 = null
      window.removeEventListener('resize', () => { this.myChart4.resize() })

      this.myChart5.clear()
      this.myChart5.dispose()
      this.myChart5 = null
      window.removeEventListener('resize', () => { this.myChart5.resize() })

  },

}
</script>

<style scoped>
.container {
  height: 100%;
}
</style>