From 27fa305bf0c3a4405366a966c28b4d32203106b8 Mon Sep 17 00:00:00 2001
From: yangfeng <wanwan926_4@163.com>
Date: 星期二, 05 十二月 2023 16:32:46 +0800
Subject: [PATCH] 人员生产效率、物料需求统计
---
src/views/cockpitPage/components/DeviceChart.vue | 44 ++------
src/views/cockpitPage/components/PerSonnelProductivity.vue | 65 ++++++------
src/views/cockpitPage/components/MaterialChart.vue | 55 ++++++----
src/views/cockpitPage/index.vue | 91 +++++++++++++----
4 files changed, 143 insertions(+), 112 deletions(-)
diff --git a/src/views/cockpitPage/components/DeviceChart.vue b/src/views/cockpitPage/components/DeviceChart.vue
index 769ce8b..f4ea752 100644
--- a/src/views/cockpitPage/components/DeviceChart.vue
+++ b/src/views/cockpitPage/components/DeviceChart.vue
@@ -29,57 +29,35 @@
};
},
},
- // xdata: {
- // type: Array,
- // require: true,
- // },
- // ydata: {
- // type: Array,
- // require: true,
- // },
},
data() {
return {
- // chartData: {
- // datax: [],
- // datay: [],
- // },
startValue: 0,
endValue: 5,
- chartTimer:null,
+ chartTimer: null,
};
},
watch: {
"chartData.datay"(val) {
- console.log(val, "璁惧鍙樻洿鏁版嵁");
- this.ydata = val;
this.startValue = 0;
this.endValue = 5;
this.pieChart("chart", this.chartData);
},
},
- mounted() {
- // this.pieChart("chart", this.chartData);
- },
+ mounted() {},
methods: {
//鍦ㄨ亴
pieChart(chartName, data) {
let that = this;
clearInterval(this.chartTimer);
- let chartDomTwo = this.$refs[chartName];
- let myChartTwo = echarts.init(chartDomTwo)
- myChartTwo.dispose()
let chartDom = this.$refs[chartName];
+ if (myChart != null && myChart != "" && myChart != undefined) {
+ myChart.dispose(); //閿�姣�
+ }
myChart = echarts.init(chartDom);
- // if (myChart != null && myChart != "" && myChart != undefined) {
- // console.log("222222222");
- // myChart.dispose(); //閿�姣�
- // myChart.resize();
- // }
- // console.log(myChart, "ssssssss");
let option;
let lineColor = "#35ddc74d";
- if (this.ydata) {
+ if (data) {
option = {
color: ["#00FFFF", "#dcb018"],
tooltip: {
@@ -136,12 +114,12 @@
}
},
},
- formatter:function(value){
- if(value.length>6){
- return `${value.slice(0,4)}...`
+ formatter: function (value) {
+ if (value.length > 6) {
+ return `${value.slice(0, 4)}...`;
}
return value;
- }
+ },
},
data: data.datax ? data.datax : [],
},
@@ -213,7 +191,7 @@
],
};
- this.chartTimer=setInterval(function () {
+ this.chartTimer = setInterval(function () {
if (option.dataZoom[0].endValue == data.datay.length) {
option.dataZoom[0].startValue = that.startValue;
option.dataZoom[0].endValue = that.endValue;
diff --git a/src/views/cockpitPage/components/MaterialChart.vue b/src/views/cockpitPage/components/MaterialChart.vue
index ec8e420..b938e98 100644
--- a/src/views/cockpitPage/components/MaterialChart.vue
+++ b/src/views/cockpitPage/components/MaterialChart.vue
@@ -11,40 +11,48 @@
import ChartTitle from "@/views/cockpitPage/components/ChartTitle.vue";
//寮曞叆echart
import * as echarts from "echarts";
+let myChart;
export default {
components: {
ChartTitle,
},
- props: {},
+ props: {
+ chartData: {
+ type: Object,
+ require: true,
+ default: () => {
+ return {
+ datax: [],
+ datay: [],
+ };
+ },
+ },
+ },
data() {
return {
- chartData: {
- datax: [
- "浜у搧1",
- "浜у搧2",
- "浜у搧3",
- "浜у搧4",
- "浜у搧5",
- "浜у搧6",
- "浜у搧7",
- "浜у搧8",
- "浜у搧9",
- "浜у搧10",
- ],
- datay: [120, 200, 150, 380, 470, 150, 230, 130, 210, 145, 330],
- },
+ startValue: 0,
+ endValue: 5,
+ chartTimer: null,
};
},
- mounted() {
- this.pieChart("chart", this.chartData);
+ watch: {
+ "chartData.datay"(val) {
+ this.startValue = 0;
+ this.endValue = 5;
+ this.pieChart("chart", this.chartData);
+ },
},
- watch: {},
+ mounted() {},
methods: {
//鍦ㄨ亴
pieChart(chartName, data) {
let that = this;
+ clearInterval(this.chartTimer);
let chartDom = this.$refs[chartName];
- let myChart = echarts.init(chartDom);
+ if (myChart != null && myChart != "" && myChart != undefined) {
+ myChart.dispose(); //閿�姣�
+ }
+ myChart = echarts.init(chartDom);
let option;
let lineColor = "#35ddc74d";
if (data) {
@@ -67,8 +75,8 @@
type: "inside",
yAxisIndex: 0,
show: false,
- startValue: 0, // 浠庡ご寮�濮�
- endValue: 5, // 涓�娆℃�у睍绀哄嚑涓�
+ startValue: that.startValue, // 浠庡ご寮�濮�
+ endValue: that.endValue, // 涓�娆℃�у睍绀哄嚑涓�
},
],
legend: {
@@ -168,8 +176,7 @@
},
],
};
- setInterval(function () {
- // 姣忔鍚戝乏婊戝姩涓�涓紝鏈�鍚庝竴涓粠澶村紑濮嬨��
+ this.chartTimer = setInterval(function () {
if (option.dataZoom[0].endValue == that.chartData.datay.length) {
option.dataZoom[0].startValue = 0;
option.dataZoom[0].endValue = 5;
diff --git a/src/views/cockpitPage/components/PerSonnelProductivity.vue b/src/views/cockpitPage/components/PerSonnelProductivity.vue
index 193499c..27a0c8b 100644
--- a/src/views/cockpitPage/components/PerSonnelProductivity.vue
+++ b/src/views/cockpitPage/components/PerSonnelProductivity.vue
@@ -16,46 +16,49 @@
import ChartTitle from "@/views/cockpitPage/components/ChartTitle.vue";
//寮曞叆echart
import * as echarts from "echarts";
+let myChart;
export default {
components: {
ChartTitle,
},
- props: {},
+ props: {
+ chartData: {
+ type: Object,
+ require: true,
+ default: () => {
+ return {
+ datax: [],
+ datay: [],
+ };
+ },
+ },
+ },
data() {
return {
- chartData: {
- datax: [
- "浜哄憳1",
- "浜哄憳2",
- "浜哄憳3",
- "浜哄憳4",
- "浜哄憳5",
- "浜哄憳6",
- "浜哄憳7",
- "浜哄憳8",
- "浜哄憳9",
- ],
- datay: [120, 200, 150, 380, 470, 150, 230, 330, 190, 440],
- },
+ startValue: 0,
+ endValue: 5,
+ chartTimer: null,
};
},
- mounted() {
- this.pieChart("chart", this.chartData);
- let chartData2 = [
- { value: 10, name: "涓�绫�" },
- { value: 20, name: "浜岀被" },
- { value: 60, name: "涓夌被" },
- { value: 10, name: "鍥涚被" },
- ];
- this.getChartRight("chart2", chartData2);
+ watch: {
+ "chartData.datay"(val) {
+ this.startValue = 0;
+ this.endValue = 5;
+ this.pieChart("chart", this.chartData);
+ },
},
- watch: {},
+ mounted() {},
methods: {
//鍦ㄨ亴
pieChart(chartName, data) {
let that = this;
+ clearInterval(this.chartTimer);
let chartDom = this.$refs[chartName];
- let myChart = echarts.init(chartDom);
+ // let myChart = echarts.init(chartDom);
+ if (myChart != null && myChart != "" && myChart != undefined) {
+ myChart.dispose(); //閿�姣�
+ }
+ myChart = echarts.init(chartDom);
let option;
let lineColor = "#35ddc74d";
if (data) {
@@ -78,8 +81,8 @@
type: "inside",
yAxisIndex: 0,
show: false,
- startValue: 0, // 浠庡ご寮�濮�
- endValue: 5, // 涓�娆℃�у睍绀哄嚑涓�
+ startValue: this.startValue, // 浠庡ご寮�濮�
+ endValue: this.endValue, // 涓�娆℃�у睍绀哄嚑涓�
},
],
legend: {
@@ -183,10 +186,8 @@
},
],
};
-
- setInterval(function () {
- // 姣忔鍚戝乏婊戝姩涓�涓紝鏈�鍚庝竴涓粠澶村紑濮嬨��
- if (option.dataZoom[0].endValue == that.chartData.datay.length) {
+ this.chartTimer = setInterval(function () {
+ if (option.dataZoom[0].endValue == data.datay.length) {
option.dataZoom[0].startValue = 0;
option.dataZoom[0].endValue = 5;
} else {
diff --git a/src/views/cockpitPage/index.vue b/src/views/cockpitPage/index.vue
index 002bdce..e63f212 100644
--- a/src/views/cockpitPage/index.vue
+++ b/src/views/cockpitPage/index.vue
@@ -21,13 +21,16 @@
<WorkOrderProgress :table-data="workOrderData"></WorkOrderProgress>
</template>
<template #leftBlock6>
- <PerSonnelProductivity></PerSonnelProductivity>
+ <PerSonnelProductivity
+ ref="leftBlock6"
+ :chartData="perSonnelChartData"
+ ></PerSonnelProductivity>
</template>
<template #rightBlock1>
<DeviceChart ref="rightBlock1" :chartData="deviceChartData"></DeviceChart>
</template>
<template #rightBlock2>
- <MaterialChart></MaterialChart>
+ <MaterialChart :chartData="materialChartData"></MaterialChart>
</template>
<template #rightBlock3>
<BarChart></BarChart>
@@ -88,12 +91,21 @@
},
// 宸ュ崟杩涘害缁熻
workOrderData: [],
+ // 浜哄憳鐢熶骇鏁堢巼
+ perSonnelChartData: {
+ datax: [],
+ datay: [],
+ },
// 璁惧璐熻嵎瀵规瘮
deviceChartData: {
datax: [],
datay: [],
},
- dataindex: 0,
+ // 鐗╂枡闇�姹傜粺璁�
+ materialChartData: {
+ datax: [],
+ datay: [],
+ },
};
},
mounted() {
@@ -105,25 +117,31 @@
watch: {},
methods: {
async getDashboard() {
- await getDashboard().then((res) => {
- console.log(res);
- // 宸︿笂鏁板�肩粺璁℃暟鎹�
- this.setLeftBlock1(res.data);
- // 鏈哄櫒寮�鏈虹巼鏁版嵁
- this.setleftBlock2(res.data);
- // 宸︿腑鏁版嵁缁熻鍊�
- this.setLeftBlock3(res.data);
- // 璁㈠崟瀹屾垚姣旂巼
- this.setLeftBlock4(res.data);
- // 宸ュ崟杩涘害缁熻
- this.setLeftBlock5(res.data);
- // 璁惧璐熻嵎瀵规瘮
- this.setRightBlock1(res.data);
- }).finally(()=>{
- setTimeout(()=>{
- this.getDashboard()
- },30000)
- });
+ await getDashboard()
+ .then((res) => {
+ console.log(res);
+ // 宸︿笂鏁板�肩粺璁℃暟鎹�
+ this.setLeftBlock1(res.data);
+ // 鏈哄櫒寮�鏈虹巼鏁版嵁
+ this.setleftBlock2(res.data);
+ // 宸︿腑鏁版嵁缁熻鍊�
+ this.setLeftBlock3(res.data);
+ // 璁㈠崟瀹屾垚姣旂巼
+ this.setLeftBlock4(res.data);
+ // 宸ュ崟杩涘害缁熻
+ this.setLeftBlock5(res.data);
+ // 浜哄憳鐢熸晥鏁堢巼姣� 浜哄憳鎶�鑳�
+ this.setLeftBlock6(res.data);
+ // 璁惧璐熻嵎瀵规瘮
+ this.setRightBlock1(res.data);
+ // 鐗╂枡闇�姹傜粺璁�
+ this.setRightBlock2(res.data);
+ })
+ .finally(() => {
+ setTimeout(() => {
+ this.getDashboard();
+ }, 30000);
+ });
},
// 澶勭悊宸︿笂鏁版嵁
setLeftBlock1(data) {
@@ -220,6 +238,25 @@
});
this.workOrderData = list;
},
+ // 浜哄憳鐢熸晥鏁堢巼姣� 浜哄憳鎶�鑳�
+ setLeftBlock6(data) {
+ this.perSonnelChartData.datax = [];
+ this.perSonnelChartData.datay = [];
+ data.PersonnelProductivity.map((item) => {
+ this.perSonnelChartData.datax.push(item.Name);
+ this.perSonnelChartData.datay.push(parseFloat(item.Value));
+ });
+ console.log(this.perSonnelChartData.datay);
+ // 浜哄憳鎶�鑳介ゼ鍥�
+ let chartData2 = [];
+ chartData2 = data.WorkerTypeStats.map((item) => {
+ return {
+ name: item.Name,
+ value: parseFloat(item.Value),
+ };
+ });
+ this.$refs.leftBlock6.getChartRight("chart2", chartData2);
+ },
// 璁惧璐熻嵎瀵规瘮
setRightBlock1(data) {
this.deviceChartData.datax = [];
@@ -228,7 +265,15 @@
this.deviceChartData.datax.push(item.Name);
this.deviceChartData.datay.push(parseFloat(item.Value));
});
- // this.$refs.rightBlock1.pieChart("chart", this.deviceChartData);
+ },
+ // 鐗╂枡闇�姹傜粺璁�
+ setRightBlock2(data) {
+ this.materialChartData.datax = [];
+ this.materialChartData.datay = [];
+ data.MaterialRequirement.map((item) => {
+ this.materialChartData.datax.push(item.Name);
+ this.materialChartData.datay.push(parseFloat(item.Value));
+ });
},
},
};
--
Gitblit v1.8.0