453 lines
9.5 KiB
Vue
453 lines
9.5 KiB
Vue
<template>
|
||
<Card title="部门管理人员出勤分析">
|
||
<div class="box">
|
||
<div class="num">{{ max }}</div>
|
||
<div class="styleImg"></div>
|
||
<div id="echartsRight" style="width: 100%; height: 100%"></div>
|
||
<div class="rightHeader">
|
||
<div class="day Selected" @click="getNowData(1)" :class="checked == 1 ? 'active' : ''">实时</div>
|
||
<div class="year Selected" @click="getTodayData(2)" :class="checked == 2 ? 'active' : ''">今日</div>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
|
||
import * as echarts from "echarts";
|
||
import { getworkerAttendanceTrendApi } from "@/api/modules/labor";
|
||
import Card from "@/components/card.vue";
|
||
import { GlobalStore } from "@/stores";
|
||
const store = GlobalStore();
|
||
let checked = ref(1);
|
||
let totalData = ref([
|
||
{
|
||
name: "XX有限公司1",
|
||
value: 12,
|
||
radio: 0.13
|
||
},
|
||
{
|
||
name: "XX有限公司2",
|
||
value: 52,
|
||
radio: 0.01
|
||
},
|
||
{
|
||
name: "XX有限公司3",
|
||
value: 15,
|
||
radio: 3.9
|
||
},
|
||
{
|
||
name: "XX有限公司4",
|
||
value: 56,
|
||
radio: 10.5
|
||
},
|
||
{
|
||
name: "XX有限公司5",
|
||
value: 17,
|
||
radio: 0.4
|
||
},
|
||
{
|
||
name: "XX有限公司6",
|
||
value: 19,
|
||
radio: 85.3
|
||
}
|
||
]);
|
||
let trafficWay = ref([
|
||
{
|
||
name: "XX有限公司1",
|
||
value: 12
|
||
},
|
||
{
|
||
name: "XX有限公司2",
|
||
value: 52
|
||
},
|
||
{
|
||
name: "XX有限公司3",
|
||
value: 15
|
||
},
|
||
{
|
||
name: "XX有限公司4",
|
||
value: 56
|
||
},
|
||
{
|
||
name: "XX有限公司5",
|
||
value: 17
|
||
},
|
||
{
|
||
name: "XX有限公司6",
|
||
value: 19
|
||
}
|
||
]);
|
||
let color = ref(["#82FBEA", "#EEA959", "#4CC4F8 ", "#E0D838", "#EC6266", "#6375C7"]);
|
||
|
||
let option = ref({} as any);
|
||
let seriesOption = ref({} as any);
|
||
let data = ref([] as any);
|
||
let dataName = ref([] as any);
|
||
|
||
function _pie3() {
|
||
let dataArr = [];
|
||
for (var i = 0; i < 100; i++) {
|
||
if (i % 2 === 0) {
|
||
dataArr.push({
|
||
name: (i + 1).toString(),
|
||
value: 10,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#5A5DE0",
|
||
borderWidth: 4,
|
||
borderColor: "#87E0FB"
|
||
}
|
||
}
|
||
});
|
||
} else {
|
||
dataArr.push({
|
||
name: (i + 1).toString(),
|
||
value: 20,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "rgba(0,0,0,0)",
|
||
borderWidth: 0,
|
||
borderColor: "rgba(0,0,0,0)"
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
return dataArr;
|
||
}
|
||
// //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
|
||
// function getCirlPoint(x0, y0, r, angle) {
|
||
// let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
|
||
// let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
|
||
// return {
|
||
// x: x1,
|
||
// y: y1
|
||
// };
|
||
// }
|
||
|
||
let max = ref(0 as Number);
|
||
let projectWorkerTypeData = ref(null as any);
|
||
//获取部门管理人员分析数据
|
||
// let timer = null
|
||
const getProjectWorkerList = async () => {
|
||
const res: any = await getworkerAttendanceTrendApi({
|
||
projectSn: store.sn,
|
||
personType: 2
|
||
});
|
||
console.log("部门管理人员分析数据", res);
|
||
let projectWorkerTypeOption: any = [];
|
||
if (res.result) {
|
||
res.result.projectCompanyWorkTotalList.forEach(item => {
|
||
// 计算工人总和 在场——实时 出勤——今日
|
||
max.value = item.presencePersonNum - 0 + max.value;
|
||
dataName.value.push(item.enterpriseName);
|
||
projectWorkerTypeOption.push({
|
||
value: item.presencePersonNum,
|
||
name: item.enterpriseName
|
||
});
|
||
});
|
||
projectWorkerTypeData.value = res.result.projectCompanyWorkTotalList;
|
||
// 接口成功获取新值
|
||
totalData.value = projectWorkerTypeOption;
|
||
trafficWay.value = projectWorkerTypeOption;
|
||
// optionData.value = getData(data);
|
||
// 初始化option
|
||
initOption();
|
||
console.log(totalData.value, "调用接口后绘图", data.value);
|
||
}
|
||
// 处理data
|
||
for (let i = 0; i < trafficWay.value.length; i++) {
|
||
data.value.push({
|
||
value: trafficWay.value[i].value,
|
||
name: trafficWay.value[i].name,
|
||
itemStyle: {
|
||
normal: {
|
||
borderWidth: 0,
|
||
shadowBlur: 2,
|
||
borderColor: color.value[i],
|
||
shadowColor: color.value[i]
|
||
}
|
||
}
|
||
});
|
||
}
|
||
};
|
||
|
||
function initOption() {
|
||
console.log("data", data.value);
|
||
|
||
seriesOption.value = [
|
||
{
|
||
name: "",
|
||
type: "pie",
|
||
center: ["26%", "52%"],
|
||
clockWise: false,
|
||
radius: [70, 60],
|
||
hoverAnimation: false,
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: false
|
||
}
|
||
}
|
||
},
|
||
data: data.value
|
||
},
|
||
{
|
||
type: "pie",
|
||
center: ["26%", "52%"],
|
||
|
||
radius: [50, 50],
|
||
zlevel: 2,
|
||
silent: true,
|
||
label: {
|
||
normal: {
|
||
show: false
|
||
}
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
show: false
|
||
}
|
||
},
|
||
data: _pie3()
|
||
}
|
||
];
|
||
|
||
option.value = {
|
||
// backgroundColor: "#0A2E5D",
|
||
color: color,
|
||
center: ["27%", "45%"],
|
||
|
||
title: {
|
||
text: "出勤总人数",
|
||
top: "128",
|
||
|
||
textAlign: "center",
|
||
left: "25%",
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 14,
|
||
fontWeight: "400"
|
||
}
|
||
},
|
||
tooltip: {
|
||
show: true
|
||
},
|
||
legend: {
|
||
type: "scroll",
|
||
show: true,
|
||
icon: "rect",
|
||
itemGap: 20,
|
||
itemWidth: 15,
|
||
itemHeight: 15,
|
||
orient: "vertical",
|
||
x: "right",
|
||
data: dataName.value,
|
||
top: 40,
|
||
right: 400,
|
||
left: 250,
|
||
bottom: 30,
|
||
align: "left",
|
||
textStyle: {
|
||
color: "#fff"
|
||
},
|
||
formatter: function (name) {
|
||
// 根据name获取对应的数据值
|
||
var dataValue = data.value.find(function (item) {
|
||
return item.name === name;
|
||
});
|
||
let tip1 = "";
|
||
let tip = "";
|
||
let le = name.length //图例文本的长度
|
||
if(le > 14){ //几个字换行大于几就可以了
|
||
let l = Math.ceil(le/14) //有些不能整除，会有余数，向上取整
|
||
for(let i = 1;i <= l;i++){ //循环
|
||
if(i < l){ //最后一段字符不能有\n
|
||
tip1 += name.slice(i*14-14,i*14)+'\n'; //字符串拼接
|
||
}else if(i === l){ //最后一段字符不一定够9个
|
||
tip = tip1 + name.slice((l-1)*14,le) //最后的拼接在最后
|
||
}
|
||
}
|
||
return tip + " " + dataValue.value;
|
||
}else{
|
||
tip = name //前面定义了tip为空，这里要重新赋值，不然会替换为空
|
||
return tip + " " + dataValue.value;
|
||
}
|
||
// if (dataValue) {
|
||
// return name + " " + dataValue.value;
|
||
// } else {
|
||
// return name;
|
||
// }
|
||
|
||
}
|
||
|
||
},
|
||
toolbox: {
|
||
show: false
|
||
},
|
||
series: seriesOption.value
|
||
};
|
||
}
|
||
|
||
function getNowData(type: any) {
|
||
checked.value = type;
|
||
let projectWorkerTypeOption: any = [];
|
||
max.value = 0;
|
||
projectWorkerTypeData.value.forEach(item => {
|
||
if (item.presencePersonNum >= 0) {
|
||
// 计算实时总和
|
||
max.value = item.presencePersonNum - 0 + max.value;
|
||
// 取
|
||
projectWorkerTypeOption.push({
|
||
value: item.presencePersonNum,
|
||
name: item.typeName
|
||
});
|
||
}
|
||
});
|
||
console.log("部门管理出勤分析", projectWorkerTypeData);
|
||
|
||
totalData.value = projectWorkerTypeOption;
|
||
trafficWay.value = projectWorkerTypeOption;
|
||
// optionData.value = getData(data);
|
||
// 初始化option
|
||
draw();
|
||
// 处理data
|
||
// data.value.length = 0;
|
||
// for (let i = 0; i < trafficWay.value.length; i++) {
|
||
// data.value.push({
|
||
// value: trafficWay.value[i].value,
|
||
// name: trafficWay.value[i].name,
|
||
// itemStyle: {
|
||
// normal: {
|
||
// borderWidth: 0,
|
||
// shadowBlur: 2,
|
||
// borderColor: color.value[i],
|
||
// shadowCgetNowDataolor: color.value[i]
|
||
// }
|
||
// }
|
||
// });
|
||
// }
|
||
}
|
||
function getTodayData(type: any) {
|
||
checked.value = type;
|
||
// console.log("部门管理出勤分析", projectWorkerTypeData);
|
||
max.value = 0;
|
||
let projectWorkerTypeOption: any = [];
|
||
projectWorkerTypeData.value.forEach(item => {
|
||
if (item.attendancePersonNum >= 0) {
|
||
// 计算今日总和
|
||
max.value = item.attendancePersonNum - 0 + max.value;
|
||
// 取
|
||
projectWorkerTypeOption.push({
|
||
value: item.attendancePersonNum,
|
||
name: item.typeName
|
||
});
|
||
}
|
||
});
|
||
totalData.value = projectWorkerTypeOption;
|
||
trafficWay.value = projectWorkerTypeOption;
|
||
// optionData.value = getData(data);
|
||
// 初始化option
|
||
draw();
|
||
// 处理data
|
||
// data.value.length = 0;
|
||
// for (let i = 0; i < trafficWay.value.length; i++) {
|
||
// data.value.push({
|
||
// value: trafficWay.value[i].value,
|
||
// name: trafficWay.value[i].name,
|
||
// itemStyle: {
|
||
// normal: {
|
||
// borderWidth: 0,
|
||
// shadowBlur: 2,
|
||
// borderColor: color.value[i],
|
||
// shadowColor: color.value[i]
|
||
// }
|
||
// }
|
||
// });
|
||
// }
|
||
}
|
||
|
||
onMounted(async () => {
|
||
await getProjectWorkerList();
|
||
draw();
|
||
});
|
||
onBeforeUnmount(() => {
|
||
echarts.dispose;
|
||
});
|
||
|
||
// 图表绘制
|
||
function draw() {
|
||
let chartDom = document.getElementById("echartsRight");
|
||
if (chartDom) {
|
||
chartDom.removeAttribute("_echarts_instance_");
|
||
}
|
||
let echartsTest = echarts.init(document.getElementById("echartsRight"));
|
||
echartsTest.setOption(option.value);
|
||
console.log("右中出勤绘图数据", option.value);
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.box {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
}
|
||
.num {
|
||
width: 2%;
|
||
font-family: sadigitalNumber;
|
||
font-size: calc(100vw * 24 / 1920);
|
||
color: #fff;
|
||
position: absolute;
|
||
top: 35%;
|
||
left: 23%;
|
||
z-index: 9;
|
||
text-align: center;
|
||
}
|
||
.styleImg {
|
||
left: 4%;
|
||
top: 4%;
|
||
width: 45%;
|
||
position: absolute;
|
||
height: 70%;
|
||
background: url("@/assets/images/dustNoise/motionEffect.webp") no-repeat;
|
||
background-size: cover;
|
||
}
|
||
|
||
.rightHeader {
|
||
width: 88%;
|
||
display: flex;
|
||
position: absolute;
|
||
z-index: 99;
|
||
color: #fff;
|
||
font-size: 10px;
|
||
text-align: center;
|
||
line-height: 20px;
|
||
left: 16%;
|
||
top: 5%;
|
||
.Selected {
|
||
height: 5%;
|
||
background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
cursor: pointer;
|
||
}
|
||
.day {
|
||
width: 15%;
|
||
margin-right: 5%;
|
||
margin-left: 55%;
|
||
}
|
||
.year {
|
||
width: 15%;
|
||
margin-right: 8%;
|
||
}
|
||
.active {
|
||
background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
::v-deep .h-card .content {
|
||
height: 85%;
|
||
}
|
||
</style>
|