From 8d1a8a22ff13bab740ff3c427eb531fd6ce97844 Mon Sep 17 00:00:00 2001
From: yangfeng <wanwan926_4@163.com>
Date: 星期二, 05 十二月 2023 15:26:12 +0800
Subject: [PATCH] 机器开机率、工单进度统计、设备负荷比接口联调
---
src/views/cockpitPage/components/WorkOrderProgress.vue | 351 +++++++++++++++++-----------------
src/views/cockpitPage/components/DeviceChart.vue | 77 +++++--
src/views/cockpitPage/components/OrderCompleteRadio.vue | 8
src/views/cockpitPage/index.vue | 134 +++++++++----
src/views/cockpitPage/components/MachineStartupRate.vue | 21 +
5 files changed, 338 insertions(+), 253 deletions(-)
diff --git a/src/views/cockpitPage/components/DeviceChart.vue b/src/views/cockpitPage/components/DeviceChart.vue
index ec25403..faf08b0 100644
--- a/src/views/cockpitPage/components/DeviceChart.vue
+++ b/src/views/cockpitPage/components/DeviceChart.vue
@@ -15,40 +15,66 @@
<script>
//寮曞叆echart
import * as echarts from "echarts";
+let myChart;
export default {
components: {},
- props: {},
+ props: {
+ chartData: {
+ type: Object,
+ require: true,
+ default: () => {
+ return {
+ datax: [],
+ datay: [],
+ };
+ },
+ },
+ // xdata: {
+ // type: Array,
+ // require: true,
+ // },
+ // ydata: {
+ // type: Array,
+ // require: true,
+ // },
+ },
data() {
return {
- chartData: {
- datax: [
- "璁惧1",
- "璁惧2",
- "璁惧3",
- "璁惧4",
- "璁惧5",
- "璁惧6",
- "璁惧7",
- "璁惧8",
- "璁惧9",
- ],
- datay: [10, 20, 15, 38, 47, 50, 20, 33, 25, 48],
- },
+ // chartData: {
+ // datax: [],
+ // datay: [],
+ // },
+ startValue: 0,
+ endValue: 5,
};
},
- mounted() {
- this.pieChart("chart", this.chartData);
+ watch: {
+ "chartData.datay"(val) {
+ console.log(val, "ddddddddddddddd");
+ this.ydata = val;
+ this.startValue = 0;
+ this.endValue = 5;
+ this.pieChart("chart", this.chartData);
+ },
},
- watch: {},
+ mounted() {
+ // this.pieChart("chart", this.chartData);
+ },
methods: {
//鍦ㄨ亴
pieChart(chartName, data) {
let that = this;
let chartDom = this.$refs[chartName];
- let myChart = echarts.init(chartDom);
+ if (myChart != null && myChart != "" && myChart != undefined) {
+ console.log("222222222");
+ myChart.dispose(); //閿�姣�
+ myChart.resize();
+ }
+ console.log(myChart, "ssssssss");
+ myChart = echarts.init(chartDom);
let option;
let lineColor = "#35ddc74d";
- if (data) {
+ if (this.ydata) {
option = {
color: ["#00FFFF", "#dcb018"],
tooltip: {
@@ -68,8 +94,8 @@
type: "inside",
yAxisIndex: 0,
show: false,
- startValue: 0, // 浠庡ご寮�濮�
- endValue: 5, // 涓�娆℃�у睍绀哄嚑涓�
+ startValue: that.startValue, // 浠庡ご寮�濮�
+ endValue: that.endValue, // 涓�娆℃�у睍绀哄嚑涓�
},
],
legend: {
@@ -177,10 +203,9 @@
};
setInterval(function () {
- // 姣忔鍚戝乏婊戝姩涓�涓紝鏈�鍚庝竴涓粠澶村紑濮嬨��
- if (option.dataZoom[0].endValue == that.chartData.datay.length) {
- option.dataZoom[0].startValue = 0;
- option.dataZoom[0].endValue = 5;
+ if (option.dataZoom[0].endValue == data.datay.length) {
+ option.dataZoom[0].startValue = that.startValue;
+ option.dataZoom[0].endValue = that.endValue;
} else {
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
diff --git a/src/views/cockpitPage/components/MachineStartupRate.vue b/src/views/cockpitPage/components/MachineStartupRate.vue
index 051f94d..e9eed89 100644
--- a/src/views/cockpitPage/components/MachineStartupRate.vue
+++ b/src/views/cockpitPage/components/MachineStartupRate.vue
@@ -5,7 +5,7 @@
<img src="/cockpitPage/machine-top.png" alt="" />
<div class="top-title">
<span>鏈哄櫒寮�鏈虹巼</span>
- <span class="top-rate">{{ "60%" }}</span>
+ <span class="top-rate">{{ startupRate + "%" }}</span>
</div>
</div>
<div class="chart" ref="chart"></div>
@@ -18,17 +18,22 @@
import * as echarts from "echarts";
export default {
components: {},
- props: {},
+ props: {
+ startupRate: {
+ type: String,
+ default: "",
+ },
+ },
data() {
return {};
},
mounted() {
- let chartData = [
- { value: 20, name: "闂茬疆" },
- { value: 20, name: "缁翠慨" },
- { value: 60, name: "宸ヤ綔" },
- ];
- this.pieChart("chart", chartData);
+ // let chartData = [
+ // { value: 20, name: "闂茬疆" },
+ // { value: 20, name: "缁翠慨" },
+ // { value: 60, name: "宸ヤ綔" },
+ // ];
+ // this.pieChart("chart", chartData);
},
watch: {},
methods: {
diff --git a/src/views/cockpitPage/components/OrderCompleteRadio.vue b/src/views/cockpitPage/components/OrderCompleteRadio.vue
index af4ccc2..5993877 100644
--- a/src/views/cockpitPage/components/OrderCompleteRadio.vue
+++ b/src/views/cockpitPage/components/OrderCompleteRadio.vue
@@ -64,14 +64,14 @@
this.startIndex + 4
);
},
- set(val) {
- console.log(val);
- },
+ // set(val) {
+ // console.log(val);
+ // },
},
},
watch: {
"orderCompleteObject.orderCompleteList"(val) {
- console.log(val, "ssssssssss");
+ // console.log(val, "ssssssssss");
this.startIndex = this.orderCompleteObject.startIndex;
},
},
diff --git a/src/views/cockpitPage/components/WorkOrderProgress.vue b/src/views/cockpitPage/components/WorkOrderProgress.vue
index 22613f6..16ae3c4 100644
--- a/src/views/cockpitPage/components/WorkOrderProgress.vue
+++ b/src/views/cockpitPage/components/WorkOrderProgress.vue
@@ -16,35 +16,35 @@
height="100%"
>
<el-table-column
- prop="workOrderId"
+ prop="Number"
label="宸ュ崟缂栧彿"
align="center"
show-overflow-tooltip
>
</el-table-column>
<el-table-column
- prop="product"
+ prop="Product"
label="浜у搧"
align="center"
show-overflow-tooltip
>
</el-table-column>
<el-table-column
- prop="productSpecs"
+ prop="Scale"
label="浜у搧瑙勬牸"
align="center"
show-overflow-tooltip
>
</el-table-column>
<el-table-column
- prop="amount"
+ prop="Amount"
label="鐢熶骇鏁伴噺"
align="center"
show-overflow-tooltip
>
</el-table-column>
<el-table-column
- prop="planTime"
+ prop="PlanTime"
label="璁″垝鏃堕棿"
align="center"
min-width="100"
@@ -55,7 +55,7 @@
<template slot-scope="scope">
<div class="progerss-bg">
<div
- v-for="item in scope.row.completeProgerss"
+ v-for="(item, index) in scope.row.completeProgerss"
class="progerss"
:class="
item.status == 1
@@ -73,16 +73,16 @@
</el-table-column>
<el-table-column label="寤舵湡棰勮" align="center">
<template slot-scope="scope">
- <div v-show="scope.row.delayWarning > 0" class="round-view">
+ <div v-show="scope.row.DelayDays > 0" class="round-view">
<div class="round red-bg"></div>
<div class="title red-color">
- {{ scope.row.delayWarning + "澶�" }}
+ {{ scope.row.DelayDays + "澶�" }}
</div>
</div>
- <div v-show="scope.row.delayWarning < 0" class="round-view">
+ <div v-show="scope.row.DelayDays < 0" class="round-view">
<div class="round green-bg"></div>
<div class="title green-color">
- {{ scope.row.delayWarning + "澶�" }}
+ {{ scope.row.DelayDays + "澶�" }}
</div>
</div>
</template>
@@ -96,171 +96,176 @@
<script>
export default {
components: {},
- props: {},
+ props: {
+ tableData: {
+ type: Array,
+ default: () => [],
+ },
+ },
data() {
return {
- tableData: [
- {
- workOrderId: "A5435",
- product: "浜у搧1",
- productSpecs: "瑙勬牸",
- amount: "2000",
- planTime: "02-23~05-23",
- completeProgerss: [
- { status: 1 },
- { status: 1 },
- { status: 2 },
- { status: 0 },
- ],
- delayWarning: 3,
- },
- {
- workOrderId: "A5435",
- product: "浜у搧1",
- productSpecs: "瑙勬牸",
- amount: "2000",
- planTime: "02-23~05-23",
- completeProgerss: [
- { status: 1 },
- { status: 1 },
- { status: 2 },
- { status: 0 },
- ],
- delayWarning: 0,
- },
- {
- workOrderId: "A5435",
- product: "浜у搧1",
- productSpecs: "瑙勬牸",
- amount: "2000",
- planTime: "02-23~05-23",
- completeProgerss: [
- { status: 1 },
- { status: 1 },
- { status: 1 },
- { status: 1 },
- { status: 1 },
- { status: 1 },
- { status: 1 },
- { status: 1 },
- { status: 2 },
- { status: 0 },
- ],
- delayWarning: 2,
- },
- {
- workOrderId: "A5435",
- product: "浜у搧1",
- productSpecs: "瑙勬牸",
- amount: "2000",
- planTime: "02-23~05-23",
- completeProgerss: [
- { status: 1 },
- { status: 1 },
- { status: 2 },
- { status: 0 },
- ],
- delayWarning: 0,
- },
- {
- workOrderId: "A5435",
- product: "浜у搧1",
- productSpecs: "瑙勬牸",
- amount: "2000",
- planTime: "02-23~05-23",
- completeProgerss: [
- { status: 1 },
- { status: 1 },
- { status: 2 },
- { status: 0 },
- ],
- delayWarning: 0,
- },
- {
- workOrderId: "A5435",
- product: "浜у搧1",
- productSpecs: "瑙勬牸",
- amount: "2000",
- planTime: "02-23~05-23",
- completeProgerss: [
- { status: 1 },
- { status: 1 },
- { status: 2 },
- { status: 0 },
- ],
- delayWarning: 0,
- },
- {
- workOrderId: "A5435",
- product: "浜у搧1",
- productSpecs: "瑙勬牸",
- amount: "2000",
- planTime: "02-23~05-23",
- completeProgerss: [
- { status: 1 },
- { status: 1 },
- { status: 2 },
- { status: 0 },
- ],
- delayWarning: -2,
- },
- {
- workOrderId: "A5435",
- product: "浜у搧1",
- productSpecs: "瑙勬牸",
- amount: "2000",
- planTime: "02-23~05-23",
- completeProgerss: [
- { status: 1 },
- { status: 1 },
- { status: 2 },
- { status: 0 },
- ],
- delayWarning: 0,
- },
- {
- workOrderId: "A5435",
- product: "浜у搧1",
- productSpecs: "瑙勬牸",
- amount: "2000",
- planTime: "02-23~05-23",
- completeProgerss: [
- { status: 1 },
- { status: 1 },
- { status: 2 },
- { status: 0 },
- ],
- delayWarning: 0,
- },
- {
- workOrderId: "BA5435",
- product: "浜у搧1",
- productSpecs: "瑙勬牸",
- amount: "2000",
- planTime: "02-23~05-23",
- completeProgerss: [
- { status: 1 },
- { status: 1 },
- { status: 2 },
- { status: 0 },
- ],
- delayWarning: 0,
- },
- {
- workOrderId: "BA5435",
- product: "浜у搧1",
- productSpecs: "瑙勬牸",
- amount: "2000",
- planTime: "02-23~05-23",
- completeProgerss: [
- { status: 1 },
- { status: 1 },
- { status: 2 },
- { status: 0 },
- ],
- delayWarning: 0,
- },
- ],
+ // tableData: [
+ // {
+ // Number: "A5435",
+ // Product: "浜у搧1",
+ // Scale: "瑙勬牸",
+ // Amount: "2000",
+ // PlanTime: "02-23~05-23",
+ // completeProgerss: [
+ // { status: 1 },
+ // { status: 1 },
+ // { status: 2 },
+ // { status: 0 },
+ // ],
+ // DelayDays: 3,
+ // },
+ // {
+ // Number: "A5435",
+ // Product: "浜у搧1",
+ // Scale: "瑙勬牸",
+ // Amount: "2000",
+ // PlanTime: "02-23~05-23",
+ // completeProgerss: [
+ // { status: 1 },
+ // { status: 1 },
+ // { status: 2 },
+ // { status: 0 },
+ // ],
+ // DelayDays: 0,
+ // },
+ // {
+ // Number: "A5435",
+ // Product: "浜у搧1",
+ // Scale: "瑙勬牸",
+ // Amount: "2000",
+ // PlanTime: "02-23~05-23",
+ // completeProgerss: [
+ // { status: 1 },
+ // { status: 1 },
+ // { status: 1 },
+ // { status: 1 },
+ // { status: 1 },
+ // { status: 1 },
+ // { status: 1 },
+ // { status: 1 },
+ // { status: 2 },
+ // { status: 0 },
+ // ],
+ // DelayDays: 2,
+ // },
+ // {
+ // Number: "A5435",
+ // Product: "浜у搧1",
+ // Scale: "瑙勬牸",
+ // Amount: "2000",
+ // PlanTime: "02-23~05-23",
+ // completeProgerss: [
+ // { status: 1 },
+ // { status: 1 },
+ // { status: 2 },
+ // { status: 0 },
+ // ],
+ // DelayDays: 0,
+ // },
+ // {
+ // Number: "A5435",
+ // Product: "浜у搧1",
+ // Scale: "瑙勬牸",
+ // Amount: "2000",
+ // PlanTime: "02-23~05-23",
+ // completeProgerss: [
+ // { status: 1 },
+ // { status: 1 },
+ // { status: 2 },
+ // { status: 0 },
+ // ],
+ // DelayDays: 0,
+ // },
+ // {
+ // Number: "A5435",
+ // Product: "浜у搧1",
+ // Scale: "瑙勬牸",
+ // Amount: "2000",
+ // PlanTime: "02-23~05-23",
+ // completeProgerss: [
+ // { status: 1 },
+ // { status: 1 },
+ // { status: 2 },
+ // { status: 0 },
+ // ],
+ // DelayDays: 0,
+ // },
+ // {
+ // Number: "A5435",
+ // Product: "浜у搧1",
+ // Scale: "瑙勬牸",
+ // Amount: "2000",
+ // PlanTime: "02-23~05-23",
+ // completeProgerss: [
+ // { status: 1 },
+ // { status: 1 },
+ // { status: 2 },
+ // { status: 0 },
+ // ],
+ // DelayDays: -2,
+ // },
+ // {
+ // Number: "A5435",
+ // Product: "浜у搧1",
+ // Scale: "瑙勬牸",
+ // Amount: "2000",
+ // PlanTime: "02-23~05-23",
+ // completeProgerss: [
+ // { status: 1 },
+ // { status: 1 },
+ // { status: 2 },
+ // { status: 0 },
+ // ],
+ // DelayDays: 0,
+ // },
+ // {
+ // Number: "A5435",
+ // Product: "浜у搧1",
+ // Scale: "瑙勬牸",
+ // Amount: "2000",
+ // PlanTime: "02-23~05-23",
+ // completeProgerss: [
+ // { status: 1 },
+ // { status: 1 },
+ // { status: 2 },
+ // { status: 0 },
+ // ],
+ // DelayDays: 0,
+ // },
+ // {
+ // Number: "BA5435",
+ // Product: "浜у搧1",
+ // Scale: "瑙勬牸",
+ // Amount: "2000",
+ // PlanTime: "02-23~05-23",
+ // completeProgerss: [
+ // { status: 1 },
+ // { status: 1 },
+ // { status: 2 },
+ // { status: 0 },
+ // ],
+ // DelayDays: 0,
+ // },
+ // {
+ // Number: "BA5435",
+ // Product: "浜у搧1",
+ // Scale: "瑙勬牸",
+ // Amount: "2000",
+ // PlanTime: "02-23~05-23",
+ // completeProgerss: [
+ // { status: 1 },
+ // { status: 1 },
+ // { status: 2 },
+ // { status: 0 },
+ // ],
+ // DelayDays: 0,
+ // },
+ // ],
};
},
mounted() {
diff --git a/src/views/cockpitPage/index.vue b/src/views/cockpitPage/index.vue
index 449e7a8..286e86a 100644
--- a/src/views/cockpitPage/index.vue
+++ b/src/views/cockpitPage/index.vue
@@ -4,7 +4,10 @@
<StatisticalBox :all-list="allList"></StatisticalBox>
</template>
<template #leftBlock2>
- <MachineStartupRate></MachineStartupRate>
+ <MachineStartupRate
+ ref="leftBlock2"
+ :startup-rate="startupRateString"
+ ></MachineStartupRate>
</template>
<template #leftBlock3>
<CountView :total-object="totalObject"></CountView>
@@ -15,13 +18,13 @@
></OrderCompleteRadio>
</template>
<template #leftBlock5>
- <WorkOrderProgress></WorkOrderProgress>
+ <WorkOrderProgress :table-data="workOrderData"></WorkOrderProgress>
</template>
<template #leftBlock6>
<PerSonnelProductivity></PerSonnelProductivity>
</template>
<template #rightBlock1>
- <DeviceChart></DeviceChart>
+ <DeviceChart ref="rightBlock1" :chartData="deviceChartData"></DeviceChart>
</template>
<template #rightBlock2>
<MaterialChart></MaterialChart>
@@ -69,12 +72,26 @@
{ value: 0, label: "鐗╂枡涓嶈冻" },
{ value: 0, label: "璁″垝杈炬垚鐜�" },
],
+ // 鏈哄櫒寮�鏈虹巼
+ startupRate: {
+ Total: 0, // 鎬绘満鍣ㄦ暟
+ Running: 0, // 寮�鏈哄彴鏁�
+ Maintenance: 0, // 缁翠慨涓澶囨暟
+ },
+ startupRateString: "0", // 寮�鏈虹巼
// 宸︿腑鏁版嵁缁熻瀵硅薄
totalObject: {},
// 璁㈠崟瀹屾垚姣旂巼
orderCompleteObject: {
startIndex: 0,
orderCompleteList: [],
+ },
+ // 宸ュ崟杩涘害缁熻
+ workOrderData: [],
+ // 璁惧璐熻嵎瀵规瘮
+ deviceChartData: {
+ datax: [],
+ datay: [],
},
dataindex: 0,
};
@@ -83,7 +100,7 @@
this.getDashboard();
setInterval(() => {
this.getDashboard();
- }, 300000);
+ }, 30000);
},
watch: {},
methods: {
@@ -92,10 +109,16 @@
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);
});
},
// 澶勭悊宸︿笂鏁版嵁
@@ -123,6 +146,28 @@
}
});
},
+ // 鏈哄櫒寮�鏈虹巼鏁版嵁
+ setleftBlock2(data) {
+ this.startupRate = {
+ Total: data?.TotalDeviceAmount ?? 0,
+ Running: data?.DeviceRunningAmount ?? 0,
+ Maintenance: data?.InMaintenanceDeviceAmount ?? 0,
+ };
+ // 寮�鏈虹巼
+ let setsInUse = (this.startupRate.Running / this.startupRate.Total) * 100;
+ this.startupRateString = setsInUse.toFixed(1).toString();
+ // 缁翠慨鐜�
+ let maintenanceRate =
+ (this.startupRate.Maintenance / this.startupRate.Total) * 100;
+ // 闂茬疆鐜�
+ let idle = 100 - setsInUse - maintenanceRate;
+ let chartData = [
+ { value: idle.toFixed(1), name: "闂茬疆" },
+ { value: maintenanceRate.toFixed(1), name: "缁翠慨" },
+ { value: setsInUse.toFixed(1), name: "宸ヤ綔" },
+ ];
+ this.$refs.leftBlock2.pieChart("chart", chartData);
+ },
// 宸︿腑鏁版嵁缁熻鍊�
setLeftBlock3(data) {
this.totalObject = {
@@ -137,44 +182,49 @@
// 璁㈠崟瀹屾垚姣旂巼
setLeftBlock4(data) {
this.orderCompleteObject.startIndex = 0;
- // 姝ゅ鍚庨潰浼氭浛鎹㈡垚鐪熷疄鍚庣杩斿洖鏁版嵁
- if (this.dataindex == 1) {
- this.orderCompleteObject.orderCompleteList = [
- { title: "SSSSDD19070047", radio: 20.6 },
- { title: "SDD19070048", radio: 79 },
- { title: "SDD19070049", radio: 100 },
- { title: "SDD19070050", radio: 30 },
- { title: "DD19070047", radio: 20.6 },
- { title: "DD19070048", radio: 49 },
- { title: "DD19070049", radio: 60 },
- { title: "SSDD19070050", radio: 10 },
- { title: "SDD19070047", radio: 33.6 },
- { title: "DD19070048", radio: 69 },
- { title: "SDD19070049", radio: 70 },
- { title: "DD19070050", radio: 20 },
- { title: "SDD19070047", radio: 66.6 },
- { title: "DD19070048", radio: 46 },
- ];
- this.dataindex = 0;
- } else {
- this.orderCompleteObject.orderCompleteList = [
- { title: "fffffDD19070047", radio: 50.6 },
- { title: "DD19070043", radio: 89 },
- { title: "DD15566649", radio: 100 },
- { title: "ASD5555550", radio: 30 },
- { title: "DD19070047", radio: 30.6 },
- { title: "DD19070048", radio: 49 },
- { title: "DD19070049", radio: 60 },
- { title: "DD19070050", radio: 10 },
- { title: "DD19070047", radio: 33.6 },
- { title: "DD19070048", radio: 69 },
- { title: "DD19070049", radio: 70 },
- { title: "DD19070050", radio: 20 },
- { title: "DD19070047", radio: 66.6 },
- { title: "DD19070048", radio: 96 },
- ];
- this.dataindex = 1;
- }
+ this.orderCompleteObject.orderCompleteList = [];
+ let list = data.OrderFinishRate.map((item) => {
+ return {
+ title: item.Name,
+ radio: parseFloat(item.Value),
+ };
+ });
+ this.orderCompleteObject.orderCompleteList = list;
+ },
+ // 宸ュ崟杩涘害缁熻
+ setLeftBlock5(data) {
+ let list = data.WorkOrderStats.map((item) => {
+ let completeProgerss = [];
+ for (let i = 0; i < item.ProcedureNum; i++) {
+ let status = 0;
+ if (i < item.FinishProcedureNum) {
+ status = 1;
+ } else if (
+ i >= item.FinishProcedureNum &&
+ i < item.FinishProcedureNum + item.ProcessingProcedureNum
+ ) {
+ status = 2;
+ } else {
+ status = 0;
+ }
+ completeProgerss.push({ status: status });
+ }
+ return {
+ ...item,
+ completeProgerss: completeProgerss,
+ };
+ });
+ this.workOrderData = list;
+ },
+ // 璁惧璐熻嵎瀵规瘮
+ setRightBlock1(data) {
+ this.deviceChartData.datax = [];
+ this.deviceChartData.datay = [];
+ data.DeviceLoad.map((item) => {
+ this.deviceChartData.datax.push(item.Name);
+ this.deviceChartData.datay.push(parseFloat(item.Value));
+ });
+ // this.$refs.rightBlock1.pieChart("chart", this.deviceChartData);
},
},
};
--
Gitblit v1.8.0