116 lines
2.6 KiB
Vue
116 lines
2.6 KiB
Vue
<template>
|
|
<div class="index-nav-body">
|
|
<div class="index-nav-body-title">劳务人员出勤率</div>
|
|
<div class="chart-content" v-if="sum > 0">
|
|
<my-chart ref="chart" id="navAttLaborerRateChart" width="100%" height="100%" :render="renderChart" />
|
|
</div>
|
|
<div class="no-data" v-if="sum == 0">
|
|
<svg-icon icon-class="nodata" />
|
|
<div>暂无数据</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import MyChart from "@/components/Chart/MyChart";
|
|
export default {
|
|
components: {
|
|
MyChart,
|
|
},
|
|
props: {
|
|
attInfo: {
|
|
type: Object,
|
|
default: () => {
|
|
return null;
|
|
},
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
chartData: [],
|
|
sum:0
|
|
};
|
|
},
|
|
mounted() {
|
|
this.init();
|
|
},
|
|
methods: {
|
|
renderChart(opt) {
|
|
let pieOption = {
|
|
tooltip: {
|
|
trigger: "item",
|
|
formatter: "{b} <br/> {c} 人 ({d}%)",
|
|
textStyle: {
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
legend: {
|
|
orient: "horizontal",
|
|
left: "center",
|
|
top: "10",
|
|
data: this.chartData.map((d) => d.name),
|
|
textStyle: {
|
|
color: "#444",
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
radius: ["30%", "60%"], // 设置为圆环图
|
|
center: ["50%", "50%"],
|
|
avoidLabelOverlap: false,
|
|
data: this.chartData,
|
|
label: {
|
|
normal: {
|
|
formatter: "{b}\n{c}",
|
|
textStyle: {
|
|
color: "#444",
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
emphasis: {
|
|
formatter: "{b}\n{c}",
|
|
textStyle: {
|
|
color: "#444",
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
},
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
};
|
|
return pieOption;
|
|
},
|
|
init() {
|
|
setTimeout(() => {
|
|
let total = this.attInfo ? this.attInfo.job.worker : 0;
|
|
let totalAtt = this.attInfo ? this.attInfo.att.worker : 0;
|
|
this.sum=totalAtt+total;
|
|
this.chartData = [
|
|
{
|
|
name: "出勤人数",
|
|
value: totalAtt,
|
|
},
|
|
{
|
|
name: "未出勤人数",
|
|
value: total - totalAtt,
|
|
},
|
|
];
|
|
if (this.$refs.chart) {
|
|
this.$refs.chart.reLoad();
|
|
}
|
|
}, 400);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style></style>
|