<template>
|
<div class="daily-main" v-loading="loading">
|
<div class="daily-content" style="height:100%">
|
<div class="time" style="margin-bottom: 10px;">
|
<el-radio-group v-model="type" size="small">
|
<el-radio-button label="周"></el-radio-button>
|
<el-radio-button label="月"></el-radio-button>
|
<el-radio-button label="年"></el-radio-button>
|
</el-radio-group>
|
<el-date-picker
|
v-model="time.week"
|
type="week"
|
format="yyyy 第 WW 周"
|
placeholder="选择周"
|
size="small"
|
v-if="type == '周'"
|
@change="m => changeTime(type, m)"
|
>
|
</el-date-picker>
|
<el-date-picker
|
v-model="time.month"
|
type="month"
|
placeholder="选择月"
|
size="small"
|
v-if="type == '月'"
|
@change="m => changeTime(type, m)"
|
>
|
</el-date-picker>
|
<el-date-picker
|
v-model="time.year"
|
type="year"
|
placeholder="选择年"
|
size="small"
|
v-if="type == '年'"
|
@change="m => changeTime(type, m)"
|
>
|
</el-date-picker>
|
</div>
|
<el-row :gutter="20">
|
<el-col
|
:xs="12"
|
:sm="8"
|
:md="6"
|
:lg="4"
|
:xl="4"
|
style="margin-bottom: 16px;"
|
>
|
<div class="daily-card">
|
<div class="daily-head">
|
<div class="daily-head-left">
|
<h4>本{{ type }}任务接收</h4>
|
<span>{{ pageData.RECEIVE }}</span>
|
</div>
|
<img src="../../../static/img/daliy-0.svg" alt="" srcset="" />
|
</div>
|
<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="` ${handleData(pageData.RECEIVE_RATIO)}% `"
|
></span>
|
<span style="font-size: 12px;">较上{{ type }}</span>
|
</div>
|
</div>
|
</el-col>
|
<el-col
|
:xs="12"
|
:sm="8"
|
:md="6"
|
:lg="4"
|
:xl="4"
|
style="margin-bottom: 16px;"
|
>
|
<div class="daily-card">
|
<div class="daily-head">
|
<div class="daily-head-left">
|
<h4>本{{ type }}任务完成</h4>
|
<span>{{ pageData.FINISHE }}</span>
|
</div>
|
<img src="../../../static/img/daliy-1.svg" alt="" srcset="" />
|
</div>
|
<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="` ${handleData(pageData.FINISHE_RATIO)}% `"
|
></span>
|
<span style="font-size: 12px;">较上{{ type }}</span>
|
</div>
|
</div>
|
</el-col>
|
<el-col
|
:xs="12"
|
:sm="8"
|
:md="6"
|
:lg="4"
|
:xl="4"
|
style="margin-bottom: 16px;"
|
>
|
<div class="daily-card">
|
<div class="daily-head">
|
<div class="daily-head-left">
|
<h4>本{{ type }}任务剩余</h4>
|
<span>{{ pageData.SURPLUS }}</span>
|
</div>
|
<img src="../../../static/img/daliy-2.svg" alt="" srcset="" />
|
</div>
|
<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="` ${handleData(pageData.SURPLUS_RATIO)}% `"
|
></span>
|
<span style="font-size: 12px;">较上{{ type }}</span>
|
</div>
|
</div>
|
</el-col>
|
<el-col
|
:xs="12"
|
:sm="8"
|
:md="6"
|
:lg="4"
|
:xl="4"
|
style="margin-bottom: 16px;"
|
>
|
<div class="daily-card">
|
<div class="daily-head">
|
<div class="daily-head-left">
|
<h4>本{{ type }}检测费用</h4>
|
<span>￥{{ handlePrice(pageData.PRICE) }}</span>
|
</div>
|
<img src="../../../static/img/daliy-3.svg" alt="" srcset="" />
|
</div>
|
<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 < 0 }"
|
class="num"
|
v-html="` ${handleData(pageData.PRICE_RATIO)}% `"
|
></span>
|
<span style="font-size: 12px;">较上{{ type }}</span>
|
</div>
|
</div>
|
</el-col>
|
<el-col
|
:xs="12"
|
:sm="8"
|
:md="6"
|
:lg="4"
|
:xl="4"
|
style="margin-bottom: 16px;"
|
>
|
<div class="daily-card">
|
<div class="daily-head">
|
<div class="daily-head-left">
|
<h4>本{{ type }}检测工时</h4>
|
<span>{{ pageData.COST }}</span>
|
</div>
|
<img src="../../../static/img/daliy-4.svg" alt="" srcset="" />
|
</div>
|
<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="` ${handleData(pageData.COST_RATIO)}% `"
|
></span>
|
<span style="font-size: 12px;">较上{{ type }}</span>
|
</div>
|
</div>
|
</el-col>
|
<el-col
|
:xs="12"
|
:sm="8"
|
:md="6"
|
:lg="4"
|
:xl="4"
|
style="margin-bottom: 16px;"
|
>
|
<div class="daily-card">
|
<div class="daily-head">
|
<div class="daily-head-left">
|
<h4>本{{ type }}检测人员</h4>
|
<span>{{ pageData.PERSON }}</span>
|
</div>
|
<img src="../../../static/img/daliy-5.svg" alt="" srcset="" />
|
</div>
|
<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="` ${handleData(pageData.PERSON_RATIO)}% `"
|
></span>
|
<span style="font-size: 12px;">较上{{ type }}</span>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20" style="height: calc(100% - 200px);">
|
<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>本{{ type }}任务接收量</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>本{{ type }}实际完成任务与接收任务对比</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 "../tool/echart.vue";
|
import { getYearAndMonthAndDays } from "../../util/date";
|
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,
|
type: "周",
|
time: {
|
week: "",
|
month: "",
|
year: ""
|
},
|
startTime: "",
|
endTime: ""
|
};
|
},
|
watch: {
|
type(val) {
|
switch (val) {
|
case "周":
|
this.time.week = new Date();
|
this.changeTime(val, this.time.week);
|
break;
|
case "月":
|
this.time.month = new Date();
|
this.changeTime(val, this.time.month);
|
break;
|
case "年":
|
this.time.year = new Date();
|
this.changeTime(val, this.time.year);
|
break;
|
}
|
}
|
},
|
mounted() {
|
this.changeTime(this.type);
|
// this.timers&&clearInterval(this.timers);
|
// setInterval(this.changeTime(this.type),1000*60*5)
|
},
|
methods: {
|
init() {
|
this.chartConfig0.isLoading = false;
|
this.chartConfig1.isLoading = false;
|
this.loading = true;
|
this.$axios
|
.get(
|
this.$api.report.businessStatisticsByDay +
|
"?startTime=" +
|
this.startTime +
|
"&endTime=" +
|
this.endTime +
|
"&type=" +
|
this.type
|
)
|
.then(res => {
|
if (res.code == 201) return;
|
this.pageData = this.HaveJson(res.data);
|
let xData = res.data.DAYS.map(m => {
|
let arr = m.split("-");
|
if (this.type == "年") {
|
return `${arr[1]}月`;
|
} else {
|
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";
|
}
|
},
|
changeTime(type, m) {
|
if (m) {
|
switch (type) {
|
case "周":
|
this.startTime = getYearAndMonthAndDays(
|
new Date(this.time.week.getTime() - 24 * 60 * 60 * 1000)
|
);
|
this.endTime = getYearAndMonthAndDays(
|
new Date(this.time.week.getTime() + 24 * 60 * 60 * 1000 * 5)
|
);
|
break;
|
case "月":
|
const year = new Date(this.time.month).getFullYear();
|
const month = new Date(this.time.month).getMonth() + 1;
|
const day = new Date(year, month, 0).getDate(); //
|
// 设置起始日期和结束日期
|
this.startTime = `${year}-${month > 9 ? "0" + month : month}-01`;
|
this.endTime = `${year}-${month > 9 ? "0" + month : month}-${day}`; // 月末
|
break;
|
case "年":
|
const year0 = new Date(this.time.year).getFullYear();
|
this.startTime = `${year0}-01-01`; // 年初
|
this.endTime = `${year0}-12-31`; // 年末
|
break;
|
}
|
} else {
|
this.startTime = getYearAndMonthAndDays(
|
new Date(new Date().getTime() - 24 * 60 * 60 * 1000)
|
);
|
this.endTime = getYearAndMonthAndDays(
|
new Date(new Date().getTime() + 24 * 60 * 60 * 1000 * 5)
|
);
|
this.time.week = new Date();
|
}
|
this.init();
|
},
|
handlePrice(val) {
|
if (val > 999999) {
|
return (val / 1000000).toFixed(2) + "百万";
|
} else if (val > 9999) {
|
return (val / 10000).toFixed(2) + "万";
|
} else {
|
return val;
|
}
|
}
|
},
|
deactivated() {
|
this.timers && clearInterval(this.timers);
|
}
|
};
|
</script>
|
|
<style scoped>
|
.daily-main {
|
height: 100%;
|
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);
|
padding: 16px;
|
box-sizing: border-box;
|
}
|
|
.daily-head {
|
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: 24px;
|
display: inline-block;
|
margin-bottom: 12px;
|
}
|
|
.daily-head-left-info {
|
display: flex;
|
align-items: center;
|
font-size: 16px;
|
color: #202224;
|
}
|
|
.num {
|
color: #00b69b;
|
}
|
.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>
|
