gjerp_ui/src/views/kban/comps/GxChanLiang.vue

<template>
  <div class="ycl">
    <template v-for="(card,i) in cards">
      <div class="gxcl">
        <div class="gxcl__title">{{card.title}}</div>
        <dv-charts class="ring-charts" :option="card.ring" />
        <div class="card-footer">
          <div class="card-footer-item">
            <div class="footer-title">数量</div>
            <div class="footer-detail">
              <dv-digital-flop v-if="show" :config="card.total" style="width:70%;height:35px;" />张
            </div>
          </div>
          <div class="card-footer-item">
            <div class="footer-title">重量</div>
            <div class="footer-detail">
              <dv-digital-flop v-if="show" :config="card.num" style="width:70%;height:35px;" />吨
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import {getGkjhwcqk} from "@/api/kban";

export default {
  name:'MainGxChanLiang',
  data(){
    return {
      show:false,
      cards:[],
      delay:null,
    }
  },
  mounted () {
    this.getData()
    this.delay=setInterval(this.getData, 30000)
  },
  methods: {
    async getData() {
      const res=await getGkjhwcqk()
      const {上料, 抛丸, 理料, 划线, 切割} = this.createData(res.data)
      this.show = false
      this.cards = [上料, 抛丸, 理料, 划线, 切割]
      this.show = true
    },
    clear(){
      console.log("本月计划完成情况停止加载数据")
      clearInterval(this.delay)
    },
    createData (list) {
      const data={
        "上料": {
          title: '上料',
          total: {
            number: [0],
            content: '{nt}',
            textAlign: 'right',
            style: {
              fill: '#ea6027',
              fontWeight: 'bold'
            }
          },
          num: {
            number: [0],
            content: '{nt}',
            textAlign: 'right',
            style: {
              fill: '#26fcd8',
              fontWeight: 'bold'
            }
          },
          ring: {
            series: [
              {
                type: 'gauge',
                startAngle: -Math.PI / 2,
                endAngle: Math.PI * 1.5,
                arcLineWidth: 13,
                radius: '80%',
                data: [
                  { name: '重量占比', value: 0 }
                ],
                axisLabel: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                pointer: {
                  show: false
                },
                backgroundArc: {
                  style: {
                    stroke: '#224590'
                  }
                },
                details: {
                  show: true,
                  formatter: '重量占比{value}%',
                  style: {
                    fill: '#1ed3e5',
                    fontSize: 20
                  }
                }
              }
            ],
            color: ['#03d3ec']
          }
        },
        "抛丸": {
          title: '抛丸',
          total: {
            number: [0],
            content: '{nt}',
            textAlign: 'right',
            style: {
              fill: '#ea6027',
              fontWeight: 'bold'
            }
          },
          num: {
            number: [0],
            content: '{nt}',
            textAlign: 'right',
            style: {
              fill: '#26fcd8',
              fontWeight: 'bold'
            }
          },
          ring: {
            series: [
              {
                type: 'gauge',
                startAngle: -Math.PI / 2,
                endAngle: Math.PI * 1.5,
                arcLineWidth: 13,
                radius: '80%',
                data: [
                  { name: '重量占比', value: 0 }
                ],
                axisLabel: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                pointer: {
                  show: false
                },
                backgroundArc: {
                  style: {
                    stroke: '#224590'
                  }
                },
                details: {
                  show: true,
                  formatter: '重量占比{value}%',
                  style: {
                    fill: '#1ed3e5',
                    fontSize: 20
                  }
                }
              }
            ],
            color: ['#03d3ec']
          }
        },
        "理料": {
          title: '理料',
          total: {
            number: [0],
            content: '{nt}',
            textAlign: 'right',
            style: {
              fill: '#ea6027',
              fontWeight: 'bold'
            }
          },
          num: {
            number: [0],
            content: '{nt}',
            textAlign: 'right',
            style: {
              fill: '#26fcd8',
              fontWeight: 'bold'
            }
          },
          ring: {
            series: [
              {
                type: 'gauge',
                startAngle: -Math.PI / 2,
                endAngle: Math.PI * 1.5,
                arcLineWidth: 13,
                radius: '80%',
                data: [
                  { name: '重量占比', value: 0 }
                ],
                axisLabel: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                pointer: {
                  show: false
                },
                backgroundArc: {
                  style: {
                    stroke: '#224590'
                  }
                },
                details: {
                  show: true,
                  formatter: '重量占比{value}%',
                  style: {
                    fill: '#1ed3e5',
                    fontSize: 20
                  }
                }
              }
            ],
            color: ['#03d3ec']
          }
        },
        "划线": {
          title: '划线',
          total: {
            number: [0],
            content: '{nt}',
            textAlign: 'right',
            style: {
              fill: '#ea6027',
              fontWeight: 'bold'
            }
          },
          num: {
            number: [0],
            content: '{nt}',
            textAlign: 'right',
            style: {
              fill: '#26fcd8',
              fontWeight: 'bold'
            }
          },
          ring: {
            series: [
              {
                type: 'gauge',
                startAngle: -Math.PI / 2,
                endAngle: Math.PI * 1.5,
                arcLineWidth: 13,
                radius: '80%',
                data: [
                  { name: '重量占比', value: 0 }
                ],
                axisLabel: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                pointer: {
                  show: false
                },
                backgroundArc: {
                  style: {
                    stroke: '#224590'
                  }
                },
                details: {
                  show: true,
                  formatter: '重量占比{value}%',
                  style: {
                    fill: '#1ed3e5',
                    fontSize: 20
                  }
                }
              }
            ],
            color: ['#03d3ec']
          }
        },
        "切割": {
          title: '切割',
          total: {
            number: [0],
            content: '{nt}',
            textAlign: 'right',
            style: {
              fill: '#ea6027',
              fontWeight: 'bold'
            }
          },
          num: {
            number: [0],
            content: '{nt}',
            textAlign: 'right',
            style: {
              fill: '#26fcd8',
              fontWeight: 'bold'
            }
          },
          ring: {
            series: [
              {
                type: 'gauge',
                startAngle: -Math.PI / 2,
                endAngle: Math.PI * 1.5,
                arcLineWidth: 13,
                radius: '80%',
                data: [
                  { name: '重量占比', value: 0 }
                ],
                axisLabel: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                pointer: {
                  show: false
                },
                backgroundArc: {
                  style: {
                    stroke: '#224590'
                  }
                },
                details: {
                  show: true,
                  formatter: '重量占比{value}%',
                  style: {
                    fill: '#1ed3e5',
                    fontSize: 20
                  }
                }
              }
            ],
            color: ['#03d3ec']
          }
        }
      }

      let totalZl=0
      for (const item of list) {
        totalZl+=(item.bcshzl/1000)||0
        if (!!item.slfkrq){
          data.上料.total.number[0]+=1
          data.上料.num.number[0]+=(item.bcshzl/1000)||0
        }
        if (!!item.pwfkrq){
          data.抛丸.total.number[0]+=1
          data.抛丸.num.number[0]+=(item.bcshzl/1000)||0
        }
        if (!!item.llfkrq){
          data.理料.total.number[0]+=1
          data.理料.num.number[0]+=(item.bcshzl/1000)||0
        }
        if (!!item.hxfkrq){
          data.划线.total.number[0]+=1
          data.划线.num.number[0]+=(item.bcshzl/1000)||0
        }
        if (!!item.qgfkrq){
          data.切割.total.number[0]+=1
          data.切割.num.number[0]+=(item.bcshzl/1000)||0
        }
      }
      let d1=data.上料.num.number[0]/totalZl*100
      d1=d1>0&&d1<1?1:d1
      data.上料.ring.series[0].data[0].value=parseFloat(d1.toFixed(2))

      let d2=data.上料.num.number[0]/totalZl*100
      d2=d2>0&&d2<1?1:d2
      data.抛丸.ring.series[0].data[0].value=parseFloat(d2.toFixed(2))

      let d3=data.上料.num.number[0]/totalZl*100
      d3=d3>0&&d3<1?1:d3
      data.理料.ring.series[0].data[0].value=parseFloat(d3.toFixed(2))

      let d4=data.上料.num.number[0]/totalZl*100
      d4=d4>0&&d4<1?1:d4
      data.划线.ring.series[0].data[0].value=parseFloat(d4.toFixed(2))

      let d5=data.上料.num.number[0]/totalZl*100
      d5=d5>0&&d5<1?1:d5
      data.切割.ring.series[0].data[0].value=parseFloat(d5.toFixed(2))
      return data
    },
  },
}
</script>

<style scoped>
.ycl{
  width: 1468px;
  height: 342px;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: row;
  margin-left: 1px;

  .gxcl{
    width: 298px;
    height: 309px;
    background: url('../../../assets/kban/yclbg.png') no-repeat;
    background-size: 100% 100%;

    .gxcl__title{
      width: 231px;
      height: 41px;
      background: url('../../../assets/kban/cltitle.png') no-repeat;
      background-size: 100% 100%;
      font-weight: bold;
      font-size: 20px;
      padding: 12px 26px;
      margin-left: 25px;
    }
  }

  display: flex;
  justify-content: space-between;
  height: 45%;

  .card-item {
    background-color: rgba(6, 30, 93, 0.5);
    border-top: 2px solid rgba(1, 153, 209, .5);
    width: 19%;
    display: flex;
    flex-direction: column;
  }

  .card-header {
    display: flex;
    height: 20%;
    align-items: center;
    justify-content: space-between;

    .card-header-left {
      font-size: 18px;
      font-weight: bold;
      padding-left: 20px;
    }

    .card-header-right {
      padding-right: 20px;
      font-size: 40px;
      color: #03d3ec;
    }
  }

  .ring-charts {
    height: 55%;
  }

  .card-footer {
    height: 25%;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .card-footer-item {
    padding: 5px 10px 0px 10px;
    box-sizing: border-box;
    width: 40%;
    background-color: rgba(6, 30, 93, 0.7);
    border-radius: 3px;

    .footer-title {
      font-size: 15px;
      margin-bottom: 5px;
    }

    .footer-detail {
      font-size: 20px;
      color: #1294fb;
      display: flex;
      font-size: 18px;
      align-items: center;

      .dv-digital-flop {
        margin-right: 5px;
      }
    }
  }
}
</style>