From f5976f38c33048020de1b116ffa004b0d889a14d Mon Sep 17 00:00:00 2001
From: yangfeng <wanwan926_4@163.com>
Date: 星期二, 05 十二月 2023 17:38:45 +0800
Subject: [PATCH] 车间正品率、工单进度统计、其他样式处理
---
src/views/cockpitPage/components/WorkOrderProgress.vue | 6 +
src/views/cockpitPage/components/BarChart.vue | 78 +++++++++++++------
src/views/cockpitPage/components/CountView.vue | 41 ++++++++-
src/views/cockpitPage/components/OrderCompleteRadio.vue | 4 -
src/views/cockpitPage/index.vue | 38 +++++++-
src/views/cockpitPage/components/MachineStartupRate.vue | 16 +--
6 files changed, 131 insertions(+), 52 deletions(-)
diff --git a/src/views/cockpitPage/components/BarChart.vue b/src/views/cockpitPage/components/BarChart.vue
index 3ca2077..5f9262d 100644
--- a/src/views/cockpitPage/components/BarChart.vue
+++ b/src/views/cockpitPage/components/BarChart.vue
@@ -15,42 +15,66 @@
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 {
+ total: 0,
+ rate: "0",
+ datax: [],
+ datay: [],
+ datay2: [],
+ };
+ },
+ },
+ },
data() {
return {
- chartData: {
- total: 1000,
- rate: "99%",
- datax: [
- "绗竴杞﹂棿",
- "绗簩杞﹂棿",
- "绗笁杞﹂棿",
- "绗洓杞﹂棿",
- "绗簲杞﹂棿",
- "绗叚杞﹂棿",
- "绗竷杞﹂棿",
- "绗叓杞﹂棿",
- "绗節杞﹂棿",
- ],
- datay: [120, 200, 150, 180, 170, 150, 130, 180, 140],
- datay2: [20, 30, 50, 40, 70, 50, 30, 80, 40],
- },
+ // chartData: {
+ // total: 1000,
+ // rate: "99%",
+ // datax: [
+ // "绗竴杞﹂棿",
+ // "绗簩杞﹂棿",
+ // "绗笁杞﹂棿",
+ // "绗洓杞﹂棿",
+ // "绗簲杞﹂棿",
+ // "绗叚杞﹂棿",
+ // "绗竷杞﹂棿",
+ // "绗叓杞﹂棿",
+ // "绗節杞﹂棿",
+ // ],
+ // datay: [120, 200, 150, 180, 170, 150, 130, 180, 140],
+ // datay2: [20, 30, 50, 40, 70, 50, 30, 80, 40],
+ // },
+ chartTimer: null,
};
},
- mounted() {
- this.pieChart("chart", this.chartData);
+ watch: {
+ "chartData.datay"(val) {
+ this.pieChart("chart", this.chartData);
+ },
},
- watch: {},
+ mounted() {
+ // this.pieChart("chart", this.chartData);
+ },
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) {
@@ -145,11 +169,16 @@
},
},
axisLabel: {
- // rotate:45,
margin: 10,
show: true,
textStyle: {
color: "#00FFFF",
+ },
+ formatter: function (value) {
+ if (value.length > 5) {
+ return `${value.slice(0, 4)}...`;
+ }
+ return value;
},
},
data: data.datax ? data.datax : [],
@@ -159,7 +188,6 @@
{
type: "value",
name: "",
- // min: data.yAxis[0].min?data.yAxis.min:0,
minInterval: 1, //鍧愭爣杞存槸鏁存暟
max: Math.ceil(eval(`Math.max(${data.datay})`) / 5) * 5, //鏁版嵁鏈�澶у�煎姞3
interval:
@@ -254,7 +282,7 @@
},
],
};
- setInterval(function () {
+ this.chartTimer = setInterval(function () {
// 姣忔鍚戝乏婊戝姩涓�涓紝鏈�鍚庝竴涓粠澶村紑濮嬨��
if (option.dataZoom[0].endValue == that.chartData.datay.length) {
option.dataZoom[0].startValue = 0;
diff --git a/src/views/cockpitPage/components/CountView.vue b/src/views/cockpitPage/components/CountView.vue
index f8c97b5..ca11420 100644
--- a/src/views/cockpitPage/components/CountView.vue
+++ b/src/views/cockpitPage/components/CountView.vue
@@ -7,7 +7,10 @@
</div>
<div class="value-view">
<div class="title-margin-left">
- {{ totalObject.InternalDeviceRunningAmount + "鍙�" }}
+ <span class="value-span">
+ {{ totalObject.InternalDeviceRunningAmount + "" }}
+ </span>
+ <span class="unit-span">鍙�</span>
</div>
</div>
</div>
@@ -17,7 +20,10 @@
</div>
<div class="value-view">
<div class="title-margin-left">
- {{ totalObject.ExternalDeviceRunningAmount + "鍙�" }}
+ <span class="value-span">{{
+ totalObject.ExternalDeviceRunningAmount
+ }}</span>
+ <span>鍙�</span>
</div>
</div>
</div>
@@ -29,7 +35,10 @@
</div>
<div class="value-view">
<div class="title-margin-left">
- {{ totalObject.OutPlanProductionAmount + "浠�" }}
+ <span class="value-span">{{
+ totalObject.OutPlanProductionAmount
+ }}</span>
+ <span>浠�</span>
</div>
</div>
</div>
@@ -39,7 +48,10 @@
</div>
<div class="value-view">
<div class="title-margin-left">
- {{ totalObject.PlanProductionAmount + "浠�" }}
+ <span class="value-span">{{
+ totalObject.PlanProductionAmount
+ }}</span>
+ <span>浠�</span>
</div>
</div>
</div>
@@ -51,7 +63,10 @@
</div>
<div class="value-view">
<div class="title-margin-left">
- {{ totalObject.RealExternalProductionAmount + "浠�" }}
+ <span class="value-span">{{
+ totalObject.RealExternalProductionAmount
+ }}</span>
+ <span>浠�</span>
</div>
</div>
</div>
@@ -61,7 +76,10 @@
</div>
<div class="value-view">
<div class="title-margin-left">
- {{ totalObject.RealProductionAmount + "浠�" }}
+ <span class="value-span">{{
+ totalObject.RealProductionAmount
+ }}</span>
+ <span>浠�</span>
</div>
</div>
</div>
@@ -147,6 +165,17 @@
border-radius: 5px;
.title-margin-left {
margin-left: 45px;
+ // white-space: nowrap;
+ display: flex;
+ align-items: center;
+ .value-span {
+ margin-top: 5px;
+ height: 100%;
+ max-width: 3em;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
}
}
}
diff --git a/src/views/cockpitPage/components/MachineStartupRate.vue b/src/views/cockpitPage/components/MachineStartupRate.vue
index e9eed89..0daa82e 100644
--- a/src/views/cockpitPage/components/MachineStartupRate.vue
+++ b/src/views/cockpitPage/components/MachineStartupRate.vue
@@ -16,6 +16,7 @@
<script>
//寮曞叆echart
import * as echarts from "echarts";
+let myChart;
export default {
components: {},
props: {
@@ -27,20 +28,17 @@
data() {
return {};
},
- mounted() {
- // let chartData = [
- // { value: 20, name: "闂茬疆" },
- // { value: 20, name: "缁翠慨" },
- // { value: 60, name: "宸ヤ綔" },
- // ];
- // this.pieChart("chart", chartData);
- },
+ mounted() {},
watch: {},
methods: {
//鍦ㄨ亴
pieChart(chartName, data) {
let chartDom = this.$refs[chartName];
- let myChart = echarts.init(chartDom);
+
+ if (myChart != null && myChart != "" && myChart != undefined) {
+ myChart.dispose(); //閿�姣�
+ }
+ myChart = echarts.init(chartDom);
let img = "/cockpitPage/machine-chart-bg.png";
let option;
if (data) {
diff --git a/src/views/cockpitPage/components/OrderCompleteRadio.vue b/src/views/cockpitPage/components/OrderCompleteRadio.vue
index 5993877..9d447b0 100644
--- a/src/views/cockpitPage/components/OrderCompleteRadio.vue
+++ b/src/views/cockpitPage/components/OrderCompleteRadio.vue
@@ -64,14 +64,10 @@
this.startIndex + 4
);
},
- // set(val) {
- // console.log(val);
- // },
},
},
watch: {
"orderCompleteObject.orderCompleteList"(val) {
- // 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 16ae3c4..8370f3e 100644
--- a/src/views/cockpitPage/components/WorkOrderProgress.vue
+++ b/src/views/cockpitPage/components/WorkOrderProgress.vue
@@ -5,7 +5,7 @@
<img src="/cockpitPage/work-order-top.png" alt="" />
<div class="top-title">
<span>宸ュ崟杩涘害缁熻</span>
- <span class="top-rate">{{ "60%" }}</span>
+ <span class="top-rate">{{ workOrderFinishRate + "%" }}</span>
</div>
</div>
<div class="table-box">
@@ -101,6 +101,10 @@
type: Array,
default: () => [],
},
+ workOrderFinishRate: {
+ type: String,
+ default: "",
+ },
},
data() {
return {
diff --git a/src/views/cockpitPage/index.vue b/src/views/cockpitPage/index.vue
index e63f212..2c88af8 100644
--- a/src/views/cockpitPage/index.vue
+++ b/src/views/cockpitPage/index.vue
@@ -18,7 +18,10 @@
></OrderCompleteRadio>
</template>
<template #leftBlock5>
- <WorkOrderProgress :table-data="workOrderData"></WorkOrderProgress>
+ <WorkOrderProgress
+ :work-order-finish-rate="workOrderFinishRate"
+ :table-data="workOrderData"
+ ></WorkOrderProgress>
</template>
<template #leftBlock6>
<PerSonnelProductivity
@@ -33,7 +36,7 @@
<MaterialChart :chartData="materialChartData"></MaterialChart>
</template>
<template #rightBlock3>
- <BarChart></BarChart>
+ <BarChart :chartData="barChartData"></BarChart>
</template>
</BackgroundBoardLayout>
</template>
@@ -91,6 +94,7 @@
},
// 宸ュ崟杩涘害缁熻
workOrderData: [],
+ workOrderFinishRate: "",
// 浜哄憳鐢熶骇鏁堢巼
perSonnelChartData: {
datax: [],
@@ -106,13 +110,18 @@
datax: [],
datay: [],
},
+ // 杞﹂棿姝ｅ搧鐜�
+ barChartData: {
+ total: 0,
+ rate: "0",
+ datax: [],
+ datay: [],
+ datay2: [],
+ },
};
},
mounted() {
this.getDashboard();
- // setInterval(() => {
- // this.getDashboard();
- // }, 30000);
},
watch: {},
methods: {
@@ -136,11 +145,13 @@
this.setRightBlock1(res.data);
// 鐗╂枡闇�姹傜粺璁�
this.setRightBlock2(res.data);
+ // 杞﹂棿姝ｅ搧鐜�
+ this.setRightBlock3(res.data);
})
.finally(() => {
setTimeout(() => {
this.getDashboard();
- }, 30000);
+ }, 300000);
});
},
// 澶勭悊宸︿笂鏁版嵁
@@ -215,6 +226,7 @@
},
// 宸ュ崟杩涘害缁熻
setLeftBlock5(data) {
+ this.workOrderFinishRate = data?.WorkOrderFinishRate.toString() ?? "0";
let list = data.WorkOrderStats.map((item) => {
let completeProgerss = [];
for (let i = 0; i < item.ProcedureNum; i++) {
@@ -246,7 +258,6 @@
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) => {
@@ -275,6 +286,19 @@
this.materialChartData.datay.push(parseFloat(item.Value));
});
},
+ // 杞﹂棿姝ｅ搧鐜�
+ setRightBlock3(data) {
+ this.barChartData.total = data.TodayFinishAmount;
+ this.barChartData.rate = data.TodayQualifiedRate;
+ this.barChartData.datax = [];
+ this.barChartData.datay = [];
+ this.barChartData.datay2 = [];
+ data.WorkshopStats.map((item) => {
+ this.barChartData.datax.push(item.Name);
+ this.barChartData.datay.push(parseFloat(item.Qualified));
+ this.barChartData.datay2.push(parseFloat(item.Defective));
+ });
+ },
},
};
</script>
--
Gitblit v1.8.0