Merge branch 'master' of http://114.132.189.42:9002/r/center-lims-before in...

licp

2024-07-03 a0b1fdec2bc5ddad11e981936b80d0fdf1e4bc69

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

@@ -1,86 +1,86 @@
<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>
    <!-- <p style="font-size: 16px;padding:19.5px 0px">每日业务统计</p> -->
    <el-row :gutter="20">
      <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
      <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 16px;">
        <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>
          <img src="../../../static/img/daliy-0.svg" alt="" srcset="">
        </div>
      </el-col>
      <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
      <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 16px;">
        <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>
          <img src="../../../static/img/daliy-1.svg" alt="" srcset="">
        </div>
      </el-col>
      <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
      <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 16px;">
        <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>
          <img src="../../../static/img/daliy-2.svg" alt="" srcset="">
        </div>
      </el-col>
      <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
      <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 16px;">
        <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>
          <img src="../../../static/img/daliy-3.svg" alt="" srcset="">
        </div>
      </el-col>
      <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
      <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 16px;">
        <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>
          <img src="../../../static/img/daliy-4.svg" alt="" srcset="">
        </div>
      </el-col>
      <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;">
      <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 16px;">
        <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>
@@ -88,17 +88,17 @@
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 30px;">
        <div class="daily-card chart-box">
    <el-row :gutter="20" style="height: calc(100% - 170px);">
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 16px;height: 100%;">
        <div class="daily-card chart-box" style="height: 100%;">
          <h4>近10日任务接收量</h4>
          <echart-module :id="'daily-left'" :config="chartConfig0" :datas="chartData0"></echart-module>
          <echart-module :id="'daily-left'" :config="chartConfig0" :datas="chartData0" style="height: calc(100% - 32px);"></echart-module>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 30px;">
        <div class="daily-card chart-box">
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 16px;height: 100%;">
        <div class="daily-card chart-box" style="height: 100%;">
          <h4>近10日实际完成任务与接收任务对比</h4>
          <echart-module :id="'daily-right'" :config="chartConfig1" :datas="chartData1"></echart-module>
          <echart-module :id="'daily-right'" :config="chartConfig1" :datas="chartData1" style="height: calc(100% - 32px);"></echart-module>
        </div>
      </el-col>
    </el-row>
@@ -114,38 +114,79 @@
  data(){
    return{
      chartConfig0:{
        height: '435px',
        isLoading:true,
        height: '',
        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,
        height: '',
        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,
      timers:null,
    }
  },
  mounted(){
    this.init()
    this.timers&&clearInterval(this.timers);
    setInterval(this.init(),1000*60*5)
  },
  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
        this.pageData = this.HaveJson(res.data)
        let xData = res.data.DAYS.map(m=>{
          let arr = m.split('-')
          return `${arr[1]}-${arr[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).tofixed(0);
      }else{
        return '0'
      }
    }
  },
  deactivated(){
    this.timers&&clearInterval(this.timers);
  }
}
</script>
@@ -155,6 +196,10 @@
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.daily-content{
  padding: 20px 0;
  box-sizing: border-box;
}
.daily-card{
  width: 100%;
@@ -175,7 +220,7 @@
  color: #202224;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 20px;
  margin-bottom: 16px;
  opacity: 0.8;
}

@@ -184,7 +229,7 @@
  font-weight: bold;
  font-size: 28px;
  display: inline-block;
  margin-bottom: 30px;
  margin-bottom: 16px;
}

.daily-head-left .daily-head-left-info{
@@ -202,7 +247,7 @@
}

.chart-box{
  padding: 30px 24px;
  padding: 16px 24px;
  box-sizing: border-box;
}