优化标准库

licp

2024-04-17 74a135c4f8b46d48a4997ac0e40ac86055b4a1a4

 src/components/view/b4-daily-business-statistics.vue

@@ -1,5 +1,5 @@
<template>
<div class="daily-main">
<div class="daily-main" v-loading="loading">
  <div class="daily-content" style="height:100%">
    <p style="font-size: 16px;padding:19.5px 0px">每日业务统计</p>
    <el-row :gutter="20">
@@ -7,10 +7,10 @@
        <div class="daily-card daily-head">
          <div class="daily-head-left">
            <h4>今日任务接收</h4>
            <span >2453</span>
            <span>{{ pageData.RECEIVE }}</span>
            <div class="daily-head-left-info">
              <img src="../../../static/img/daliy-up.svg" alt="">
              <span :class="{active:false}" class="num">&nbsp; 8.5%&nbsp; </span>
              <img :src="`../../../static/img/daliy-${pageData.RECEIVE_RATIO<0?'down':'up'}.svg`" alt="">
              <span :class="{active:pageData.RECEIVE_RATIO<0}" class="num" v-html="`&nbsp; ${handleData(pageData.RECEIVE_RATIO)}%&nbsp; `"></span>
              <span style="font-size: 12px;">较昨天</span>
            </div>
          </div>
@@ -21,10 +21,10 @@
        <div class="daily-card daily-head">
          <div class="daily-head-left">
            <h4>今日任务完成</h4>
            <span >1687</span>
            <span >{{ pageData.FINISHE }}</span>
            <div class="daily-head-left-info">
              <img src="../../../static/img/daliy-up.svg" alt="">
              <span :class="{active:false}" class="num">&nbsp; 8.5%&nbsp; </span>
              <img :src="`../../../static/img/daliy-${pageData.FINISHE_RATIO<0?'down':'up'}.svg`" alt="">
              <span :class="{active:pageData.FINISHE_RATIO<0}" class="num" v-html="`&nbsp; ${handleData(pageData.FINISHE_RATIO)}%&nbsp; `"></span>
              <span style="font-size: 12px;">较昨天</span>
            </div>
          </div>
@@ -35,10 +35,10 @@
        <div class="daily-card daily-head">
          <div class="daily-head-left">
            <h4>今日任务剩余</h4>
            <span >766</span>
            <span >{{ pageData.SURPLUS }}</span>
            <div class="daily-head-left-info">
              <img src="../../../static/img/daliy-up.svg" alt="">
              <span :class="{active:false}" class="num">&nbsp; 8.5%&nbsp; </span>
              <img :src="`../../../static/img/daliy-${pageData.SURPLUS_RATIO<0?'down':'up'}.svg`" alt="">
              <span :class="{active:pageData.SURPLUS_RATIO<0}" class="num" v-html="`&nbsp; ${handleData(pageData.SURPLUS_RATIO)}%&nbsp; `"></span>
              <span style="font-size: 12px;">较昨天</span>
            </div>
          </div>
@@ -49,10 +49,10 @@
        <div class="daily-card daily-head">
          <div class="daily-head-left">
            <h4>今日检测费用</h4>
            <span >￥7359</span>
            <span>￥{{ pageData.PRICE }}</span>
            <div class="daily-head-left-info">
              <img src="../../../static/img/daliy-up.svg" alt="">
              <span :class="{active:false}" class="num">&nbsp; 8.5%&nbsp; </span>
              <img :src="`../../../static/img/daliy-${pageData.PRICE_RATIO<0?'down':'up'}.svg`" alt="">
              <span :class="{active:pageData.PRICE_RATIO}" class="num" v-html="`&nbsp; ${handleData(pageData.PRICE_RATIO)}%&nbsp; `"></span>
              <span style="font-size: 12px;">较昨天</span>
            </div>
          </div>
@@ -63,10 +63,10 @@
        <div class="daily-card daily-head">
          <div class="daily-head-left">
            <h4>今日检测工时</h4>
            <span >306</span>
            <span>{{pageData.COST}}</span>
            <div class="daily-head-left-info">
              <img src="../../../static/img/daliy-down.svg" alt="">
              <span :class="{active:true}" class="num">&nbsp; 8.5%&nbsp; </span>
              <img :src="`../../../static/img/daliy-${pageData.COST_RATIO<0?'down':'up'}.svg`" alt="">
              <span :class="{active:pageData.COST_RATIO<0}" class="num" v-html="`&nbsp; ${handleData(pageData.COST_RATIO)}%&nbsp; `"></span>
              <span style="font-size: 12px;">较昨天</span>
            </div>
          </div>
@@ -77,10 +77,10 @@
        <div class="daily-card daily-head">
          <div class="daily-head-left">
            <h4>今日检测人员</h4>
            <span >109</span>
            <span >{{ pageData.PERSON }}</span>
            <div class="daily-head-left-info">
              <img src="../../../static/img/daliy-up.svg" alt="">
              <span :class="{active:false}" class="num">&nbsp; 8.5%&nbsp; </span>
              <img :src="`../../../static/img/daliy-${pageData.PERSON_RATIO<0?'down':'up'}.svg`" alt="">
              <span :class="{active:pageData.PERSON_RATIO<0}" class="num" v-html="`&nbsp; ${handleData(pageData.PERSON_RATIO)}%&nbsp; `"></span>
              <span style="font-size: 12px;">较昨天</span>
            </div>
          </div>
@@ -115,36 +115,38 @@
    return{
      chartConfig0:{
        height: '435px',
        isLoading:true,
        isLoading:false,
        type:'line'
      },
      chartData0:{
        xData:['4-11','4-12','4-13','4-14','4-15','4-16','4-17','4-18','4-19','4-20'],
        xData:[],
        yData:[
          {
            title:'任务接收量',
            data:[10,20,10,40,50,20,70,40,90,50]
            data:[]
          }
        ]
      },
      chartConfig1:{
        height: '435px',
        isLoading:true,
        isLoading:false,
        type:'bar'
      },
      chartData1:{
        xData:['4-11','4-12','4-13','4-14','4-15','4-16','4-17','4-18','4-19','4-20'],
        xData:[],
        yData:[
          {
            title:'今日接收',
            data:[10,20,10,40,50,20,70,40,90,50]
            data:[]
          },
          {
            title:'今日完成',
            data:[15,10,6,33,66,44,56,77,44,55]
            data:[]
          },
        ]
      }
      },
      pageData:{},
      loading:false,
    }
  },
  mounted(){
@@ -152,10 +154,31 @@
  },
  methods:{
    init(){
      this.chartConfig0.isLoading = false
      this.chartConfig1.isLoading = false
      this.loading = true;
      this.$axios.get(this.$api.report.businessStatisticsByDay).then(res => {
        if (res.code == 201) return
        console.log(res)
        this.pageData = this.HaveJson(res.data)
        let xData = res.data.DAYS.map(m=>{
          return `${m[1]}-${m[2]}`
        })
        this.chartData0.xData = xData
        this.chartData1.xData = xData
        this.chartData0.yData[0].data = this.pageData.RECETENDAYS
        this.chartData1.yData[0].data = this.pageData.RECETENDAYS
        this.chartData1.yData[1].data = this.pageData.FINISHTENDAYS
        this.loading = false;
        this.chartConfig0.isLoading = true
        this.chartConfig1.isLoading = true
      })
    },
    handleData(val){
      if(val){
        return Math.abs(val)*100;
      }else{
        return '0'
      }
    }
  }
}