From 2e062b9a6c69068108575c2787a723e44679c749 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=A5=E5=A6=8D?= <3096114695@qq.com> Date: Wed, 12 Jul 2023 16:46:53 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AF=B9=E6=8E=A5=E5=8F=B3=E4=B8=8A=E6=8C=89?= =?UTF-8?q?=E5=B7=A5=E7=A7=8D=E5=88=86=E6=9E=90=E6=8E=A5=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/modules/labor.ts | 10 + .../laborManagement/rightTop.vue | 196 +++++++++--------- 2 files changed, 108 insertions(+), 98 deletions(-) diff --git a/src/api/modules/labor.ts b/src/api/modules/labor.ts index 5430235..e4cfa8e 100644 --- a/src/api/modules/labor.ts +++ b/src/api/modules/labor.ts @@ -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); +}; diff --git a/src/views/sevenLargeScreen/laborManagement/rightTop.vue b/src/views/sevenLargeScreen/laborManagement/rightTop.vue index 6d95c9c..12bf3e5 100644 --- a/src/views/sevenLargeScreen/laborManagement/rightTop.vue +++ b/src/views/sevenLargeScreen/laborManagement/rightTop.vue @@ -1,10 +1,10 @@ @@ -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,101 +113,102 @@ function getData(data) { } return res; } -let objData = reactive(array2obj(data, "name")); -let optionData = reactive(getData(data)); -const option = reactive({ - legend: { - show: true, - itemGap: 15, - itemWidth: 15, - itemHeight: 15, - icon: "rect", - orient: "horizontal", - // x: "right", - right: 300, - 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: ["#eea959", "#4cc4f8", "#6375c7", "#81f9e8", " #ec6266"], - // grid: { - // top: "0", - // left: "40%", - // right: "20%", - // containLabel: false - // }, - yAxis: [ - { - type: "category", - inverse: true, - axisLine: { - show: false - }, - axisTick: { - show: false - }, - axisLabel: { - interval: 0, - inside: true, - textStyle: { - color: "#fff", - fontSize: 16 - }, - show: true - }, - data: optionData.yAxis - } - ], - xAxis: [ - { - show: false - } - ], - series: optionData.series -}); +// 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: 20, + itemWidth: 40, + itemHeight: 10, + icon: "rect", + orient: "horizontal", + // x: "right", + right: 300, + left: 260, + bottom: 10, + align: "left", + textStyle: { + color: "#EEEEEE" + } + }, + color: ["#eea959", "#4cc4f8", "#6375c7", "#81f9e8", "#ec6266"], + yAxis: [ + { + type: "category", + inverse: true, + axisLine: { + show: false + }, + axisTick: { + show: false + }, + axisLabel: { + interval: 0, + inside: true, + textStyle: { + color: "#EEEEEE", + fontSize: 16 + }, + show: true + }, + data: optionData.value.yAxis + } + ], + xAxis: [ + { + show: false + } + ], + 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 + }); + } }); + data = projectWorkerTypeOption; + optionData.value = getData(data); + // 初始化option + initOption(); + // console.log(option.value,'调用接口后绘图') } - setTimeout(() => { - draw(); - }, 500); + }; onMounted(async () => { - getProjectWorkerList(); + // console.log('挂载时',optionData) + await getProjectWorkerList(); + draw(); });