统计图表 、 任务展示代码搬迁

lxp

2025-03-15 538cb677c7cd304bc8a348c261c74694a06ec8e6

 src/views/chart/dailyBusinessStatistical/index.vue

@@ -1,9 +1,270 @@
<template>
  <div>每日业务统计</div>
</template>

<script>
export default {};
</script>

<style></style>
  <div class="daily-main" v-loading="loading">
    <div class="daily-content" style="height:100%">
      <el-row :gutter="20">
        <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>{{ pageData.RECEIVE }}</span>
              <div class="daily-head-left-info">
                <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: 16px;">
          <div class="daily-card daily-head">
            <div class="daily-head-left">
              <h4>今日任务完成</h4>
              <span >{{ pageData.FINISHE }}</span>
              <div class="daily-head-left-info">
                <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: 16px;">
          <div class="daily-card daily-head">
            <div class="daily-head-left">
              <h4>今日任务剩余</h4>
              <span >{{ pageData.SURPLUS }}</span>
              <div class="daily-head-left-info">
                <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: 16px;">
          <div class="daily-card daily-head">
            <div class="daily-head-left">
              <h4>今日检测费用</h4>
              <span>￥{{ pageData.PRICE }}</span>
              <div class="daily-head-left-info">
                <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: 16px;">
          <div class="daily-card daily-head">
            <div class="daily-head-left">
              <h4>今日检测工时</h4>
              <span>{{pageData.COST}}</span>
              <div class="daily-head-left-info">
                <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: 16px;">
          <div class="daily-card daily-head">
            <div class="daily-head-left">
              <h4>今日检测人员</h4>
              <span >{{ pageData.PERSON }}</span>
              <div class="daily-head-left-info">
                <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>
            <img src="../../../static/img/daliy-5.svg" alt="" srcset="">
          </div>
        </el-col>
      </el-row>
      <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" 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: 16px;height: 100%;">
          <div class="daily-card chart-box" style="height: 100%;">
            <h4>近10日实际完成任务与接收任务对比</h4>
            <echart-module :id="'daily-right'" :config="chartConfig1" :datas="chartData1" style="height: calc(100% - 32px);"></echart-module>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
  </template>
  
  <script>
  
import EchartModule from '@/components/Echart/echart.vue'
import {
  businessStatisticsByDay
} from "../../../api/chart/dailyBusinessStatistical";
  export default {
    components: {EchartModule},
    data(){
      return{
        chartConfig0:{
          height: '',
          isLoading:false,
          type:'line'
        },
        chartData0:{
          xData:[],
          yData:[
            {
              title:'任务接收量',
              data:[]
            }
          ]
        },
        chartConfig1:{
          height: '',
          isLoading:false,
          type:'bar'
        },
        chartData1:{
          xData:[],
          yData:[
            {
              title:'今日接收',
              data:[]
            },
            {
              title:'今日完成',
              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;
        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){
          let num = Math.abs(val)*100
          return num.toFixed(0);
        }else{
          return '0'
        }
      }
    },
    deactivated(){
      this.timers&&clearInterval(this.timers);
    }
  }
  </script>
  
  <style scoped>
  .daily-main{
    height: 450px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .daily-content{
    padding: 20px 0;
    box-sizing: border-box;
  }
  .daily-card{
    width: 100%;
    background: #FFFFFF;
    border-radius: 14px;
    box-shadow: 6px 6px 54px 0px rgba(0,0,0,0.05);
  }
  
  .daily-head{
    padding: 16px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  
  .daily-head-left h4{
    color: #202224;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 16px;
    opacity: 0.8;
  }
  
  .daily-head-left>span{
    font-family: Nunito Sans-Bold;color: #202224;
    font-weight: bold;
    font-size: 28px;
    display: inline-block;
    margin-bottom: 16px;
  }
  
  .daily-head-left .daily-head-left-info{
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #202224;
  }
  
  .daily-head-left .daily-head-left-info .num{
    color: #00B69B;
  }
  .daily-head-left .daily-head-left-info .num.active{
    color: #F93C65;
  }
  
  .chart-box{
    padding: 16px 24px;
    box-sizing: border-box;
  }
  
  .chart-box h4{
    color: #202224;
    font-family: PingFang SC-Regular;
    font-weight: 400;
    font-size: 24px;
    margin-bottom: 16px;
  }
  
  .chart{
    width: 100%;
    height: 450px;
  }
  </style>