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

<template>
  <div id="up1">
    <div class="bg-color-black1">
      <div class ="left">
        <p class="vertical-text">
          设备状况
        </p>
      </div>
      <div class="body-box">
        <div class="percent mt-2">
            <div class="circletitle">{{ rate.title }}</div>
            <CenterChart
                :id="rate.id"
                :tips="rate.tips"
                :colorObj="rate.colorData"
            />
        </div>

        <div class="dec">
          <div class="mt-3">车间总设备数量：{{totalqty}}</div>
          <div class="mt-3">正常运行设备数量：{{okqty}}</div>
          <div class="mt-3">异常设备数量：{{abnormalqty}}</div>
          <div class="mt-3">已保养设备数量：{{byqty}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CenterChart from "../../components/prodlinechart/up1Chart/up1DChart";

  export default {
    components: {CenterChart},
    data() {
      return {
        totalqty: 0,
        okqty: 0,
        abnormalqty: 0,
        byqty: 0,
        timing:null,
        rate: {
            id: 'centerRate1',
            tips: 60,
            title:'保养状况',
            colorData: {
              textStyle: '#000000',
              series: {
                color: ['rgba(19,122,244,0.29)', 'transparent'],
                dataColor: {
                  normal: '#00aa55',
                  shadowColor: '#0ad386'
                }
              }
            }
          },
      }
    },
    mounted() {
      this.refreshdata()
    },
    beforeDestroy () {
      clearInterval(this.timing)
    },
    methods: {
      refreshdata() {
        this.getdata(); //获取-数据
        this.timing = setInterval(() => {
          this.getdata(); //获取--数据
        }, 10000);
      },
      async getdata() {
        //今日保养完成率
        await this.$http.get("kanban/datalist.action?caller=KB!LINEDEVICEMAINTAINRATE&_noc=1&page=1&pageSize=100",{
          params: {
            condition: "de_workshop='"+sessionStorage.getItem('li_code')+"'"
          }
        }).then((result)=>{
                  let dataList = JSON.parse(result.data.data);
                  if (dataList.length > 0) {
                    const element = dataList[0];
                    this.rate.tips = element.rate;
                  }
                },(result)=>{
                  console.error(result)
                }
            );

         //设备数量汇总
        var caller = 'KB!LINEDEVICETOTAL';
        await this.$http.get("kanban/datalist.action?caller=" + caller + "&_noc=1&page=1&pageSize=100", {
          params: {
            condition: "de_workshop='"+sessionStorage.getItem('li_code')+"'"
          }
        }).then((result) => {
              let dataList = JSON.parse(result.data.data);
              if (dataList.length > 0) {
                this.totalqty = dataList[0].totalqty;
                this.okqty = dataList[0].okqty;
                this.abnormalqty = dataList[0].abnormalqty;
                this.byqty = dataList[0].byqty;
              }
            }, (result) => {
              console.error(result)
            }
        );
      }
    }
  }
</script>

<style lang="scss" scoped>
  $box-height: 320px;
  $box-width: 100%;
  #up1 {
    padding: 13px;
    height: $box-height;
    width: $box-width;
    border-radius: 5px;
    .bg-color-black1 {
      height: $box-height - 25px;
      border-radius: 10px;
      padding: 5px ;
      display: grid;
      grid-template-columns: 0.5fr 1.5fr ;
    }

    .left{
      display: flex;
      align-items: center;     /* 垂直居中 */
      .vertical-text {
        width:50px;
        height: 280px;
        border-radius: 15px;
        color: white;              /* 文字颜色 */
        background: linear-gradient(160deg, #0066cc, #0044aa);
        font-size: 24px;
        padding: 0px 13px 0px 13px;
        line-height: 70px;
        text-align: center;
        font-weight: bold;
      }
    }
    .body-box {
      border-radius: 10px;
      overflow: hidden;
      .percent {
        flex-wrap: wrap;
        display: flex;
        justify-content: center;
        left:30%;
        flex-direction: column;

        .circletitle{
          margin-bottom:.5rem;
          font-size:1.2308rem;
          font-weight: bold;
          margin-left: 80px;
        }
      }
      .dec{
        display: flex;
        -webkit-box-pack:center;
        -ms-flex-pack:center;
        justify-content:center;
        font-size:1.2308rem;
        font-weight: bold;
        flex-direction: column;
        letter-spacing: 2px;
        margin-left:.75rem
      }
    }

  }
</style>