对接右上按工种分析接口
This commit is contained in:
严妍
parent
1d0e7b9720
commit
2e062b9a6c
@ -29,3 +29,13 @@ export const getEnterpriseInfoApi = (params: {}) => {
|
||||
export const getWorkerInfoApi = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/workerInfo/selectAllProjectTeamList`, params);
|
||||
};
|
||||
|
||||
// 右中 获取部门管理人员出勤分析
|
||||
export const getworkerAttendanceTrendApi = (params: {}) => {
|
||||
return http.get(BASEURL + `/xmgl/workerAttendance/queryAttendanceOfEachCompany`, params);
|
||||
};
|
||||
|
||||
// 查询右下 获取按分包单位分析
|
||||
export const getComapnyWorkTotalListApi = (params: {}) => {
|
||||
return http.get(BASEURL + `/xmgl/workerInfo/selectProjectComapnyWorkTotalList`, params);
|
||||
};
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<Card title="按工种分析">
|
||||
<div class="rightHeader">
|
||||
<div class="day Selected">实时</div>
|
||||
<div class="year Selected">今日</div>
|
||||
<!-- <div class="day Selected">实时</div> -->
|
||||
<!-- <div class="year Selected">今日</div> -->
|
||||
</div>
|
||||
<div class="num">168</div>
|
||||
<div class="num">{{max}}</div>
|
||||
<div id="echartTop" style="width: 100%; height: 100%"></div>
|
||||
</Card>
|
||||
</template>
|
||||
@ -20,12 +20,12 @@ const store = GlobalStore();
|
||||
let data = reactive(
|
||||
[
|
||||
{
|
||||
value: 300,
|
||||
name: "名字"
|
||||
value: 400,
|
||||
name: "名字1"
|
||||
},
|
||||
{
|
||||
value: 500,
|
||||
name: "名字"
|
||||
value: 1500,
|
||||
name: "名字2"
|
||||
}
|
||||
].sort(function (a, b) {
|
||||
return b.value - a.value;
|
||||
@ -57,15 +57,14 @@ let data = reactive(
|
||||
// return b.value - a.value;
|
||||
// })
|
||||
// );
|
||||
let max = reactive(Math.max(...data.map(item => item.value)) + 1000);
|
||||
|
||||
function array2obj(array, key) {
|
||||
let resObj = {};
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
resObj[array[i][key]] = array[i];
|
||||
}
|
||||
return resObj;
|
||||
}
|
||||
// function array2obj(array, key) {
|
||||
// let resObj = {};
|
||||
// for (let i = 0; i < array.length; i++) {
|
||||
// resObj[array[i][key]] = array[i];
|
||||
// }
|
||||
// return resObj;
|
||||
// }
|
||||
|
||||
function getData(data) {
|
||||
let res = {
|
||||
@ -81,14 +80,14 @@ function getData(data) {
|
||||
radius: [87 - i * 10 + "%", 82 - i * 10 + "%"],
|
||||
center: ["25%", "50%"],
|
||||
label: {
|
||||
show: false
|
||||
show: true
|
||||
},
|
||||
itemStyle: {
|
||||
label: {
|
||||
show: false
|
||||
show: true
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
show: true
|
||||
},
|
||||
borderWidth: 10
|
||||
},
|
||||
@ -98,7 +97,7 @@ function getData(data) {
|
||||
name: data[i].name
|
||||
},
|
||||
{
|
||||
value: max - data[i].value,
|
||||
value: max.value,
|
||||
name: "",
|
||||
itemStyle: {
|
||||
color: "rgba(9, 26, 61)",
|
||||
@ -114,14 +113,18 @@ function getData(data) {
|
||||
}
|
||||
return res;
|
||||
}
|
||||
let objData = reactive(array2obj(data, "name"));
|
||||
let optionData = reactive(getData(data));
|
||||
const option = reactive({
|
||||
// let objData = array2obj(data, "name");
|
||||
let option = ref({} as any)
|
||||
let optionData = ref(null as any);
|
||||
|
||||
// 初始化option 绘制图表
|
||||
function initOption() {
|
||||
option.value = {
|
||||
legend: {
|
||||
show: true,
|
||||
itemGap: 15,
|
||||
itemWidth: 15,
|
||||
itemHeight: 15,
|
||||
itemGap: 20,
|
||||
itemWidth: 40,
|
||||
itemHeight: 10,
|
||||
icon: "rect",
|
||||
orient: "horizontal",
|
||||
// x: "right",
|
||||
@ -129,30 +132,11 @@ const option = reactive({
|
||||
left: 260,
|
||||
bottom: 10,
|
||||
align: "left",
|
||||
formatter: function (name) {
|
||||
return "{title|" + name + "}{value|" + objData[name].value + "}";
|
||||
},
|
||||
textStyle: {
|
||||
rich: {
|
||||
title: {
|
||||
width: 40,
|
||||
color: "#fff",
|
||||
padding: [0, 0, 0, 10]
|
||||
},
|
||||
value: {
|
||||
color: "#fff",
|
||||
padding: [0, 40]
|
||||
}
|
||||
}
|
||||
color: "#EEEEEE"
|
||||
}
|
||||
},
|
||||
color: ["#eea959", "#4cc4f8", "#6375c7", "#81f9e8", " #ec6266"],
|
||||
// grid: {
|
||||
// top: "0",
|
||||
// left: "40%",
|
||||
// right: "20%",
|
||||
// containLabel: false
|
||||
// },
|
||||
color: ["#eea959", "#4cc4f8", "#6375c7", "#81f9e8", "#ec6266"],
|
||||
yAxis: [
|
||||
{
|
||||
type: "category",
|
||||
@ -167,12 +151,12 @@ const option = reactive({
|
||||
interval: 0,
|
||||
inside: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
color: "#EEEEEE",
|
||||
fontSize: 16
|
||||
},
|
||||
show: true
|
||||
},
|
||||
data: optionData.yAxis
|
||||
data: optionData.value.yAxis
|
||||
}
|
||||
],
|
||||
xAxis: [
|
||||
@ -180,35 +164,51 @@ const option = reactive({
|
||||
show: false
|
||||
}
|
||||
],
|
||||
series: optionData.series
|
||||
});
|
||||
|
||||
series: optionData.value.series
|
||||
};
|
||||
}
|
||||
// 图表绘制
|
||||
function draw() {
|
||||
let echartsTest = echarts.init(document.getElementById("echartTop"));
|
||||
echartsTest.setOption(option);
|
||||
echartsTest.setOption(option.value);
|
||||
// console.log('绘图数据',option.value);
|
||||
}
|
||||
// 存储最大值
|
||||
let max = ref(0 as any)
|
||||
|
||||
//获取工种分析数据
|
||||
// let timer = null
|
||||
const getProjectWorkerList = async () => {
|
||||
const res = await selectProjectWorkerTypeTotalListApi({
|
||||
const res: any = await selectProjectWorkerTypeTotalListApi({
|
||||
projectSn: store.sn
|
||||
});
|
||||
console.log("获取工种分析数据", res);
|
||||
|
||||
let projectWorkerTypeOption: any = [];
|
||||
if (res.result) {
|
||||
res.result.forEach(item => {
|
||||
data.push({
|
||||
value: item.typeName,
|
||||
name: item.totalPersonNum
|
||||
});
|
||||
// 只取有数据的工种
|
||||
if (item.workerNum > 0) {
|
||||
// 计算工人总和
|
||||
max.value = max.value + item.workerNum;
|
||||
projectWorkerTypeOption.push({
|
||||
value: item.workerNum,
|
||||
name: item.typeName
|
||||
});
|
||||
}
|
||||
setTimeout(() => {
|
||||
draw();
|
||||
}, 500);
|
||||
});
|
||||
data = projectWorkerTypeOption;
|
||||
optionData.value = getData(data);
|
||||
// 初始化option
|
||||
initOption();
|
||||
// console.log(option.value,'调用接口后绘图')
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
getProjectWorkerList();
|
||||
// console.log('挂载时',optionData)
|
||||
await getProjectWorkerList();
|
||||
draw();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user