yinq
/
zs_aucma-mes-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改看板 添加oee和能耗

Browse Source
master
suixy 6 days ago
parent bc847469ed
commit d3088aec39
5 changed files with 5016 additions and 47 deletions
Show Stats Download Patch File Download Diff File

178
src/views/board/board1/index.vue
Unescape Escape View File

@ -1,6 +1,8 @@
<template>
<div class="app-container">
<div class="headTitle">注塑车间设备运行监控平台</div>
<div class="subTitle" style="top: 20%;left: 88%;">设备OEE</div>
<div class="subTitle" style="top: 60%;left: 88%;">设备能耗</div>
<div class="topNum deviceNum">
<span class="text">设备数量</span>
<span>：</span>
@ -70,19 +72,164 @@
<div class="itemText">待机时长</div>
</div>
</div>
<div class="oee">
<Chart ref="chart1"></Chart>
</div>
<div class="energy">
<Chart ref="chart2"></Chart>
</div>
</div>
</template>
<script>
import Chart from "@/components/board/Chart.vue";
import * as echarts from "echarts";
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
export default {
components: {},
components: {
Chart
},
name: "Liner",
data() {
return {}
},
mounted() {
this.$refs.chart1.setData({
title: [
{
text: "75%",
x: "center",
y: "center",
textStyle: {
fontSize: 2 * vw,
color: "#FFFFFF",
fontFamily: "DINAlternate-Bold, DINAlternate",
foontWeight: "600",
},
},
],
polar: {
radius: ["58%", "68%"],
center: ["50%", "50%"],
},
angleAxis: {
max: 133,
// startAngle: 225,
// endAngle: -180,
clockwise: true,
show: false
},
radiusAxis: {
type: "category",
show: true,
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
series: [
{
name: "",
type: "bar",
roundCap: false,
barWidth: 30,
showBackground: true,
backgroundStyle: {
color: "rgba(66, 66, 66, .3)",
},
data: [100],
coordinateSystem: "polar",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "#16CEB9",
},
{
offset: 1,
color: "#6648FF",
},
]),
},
},
},
],
})
this.$refs.chart2.setData({
title: [
{
text: "75%",
x: "center",
y: "center",
textStyle: {
fontSize: 2 * vw,
color: "#FFFFFF",
fontFamily: "DINAlternate-Bold, DINAlternate",
fontWeight: "600",
},
},
],
polar: {
radius: ["58%", "68%"],
center: ["50%", "50%"],
},
angleAxis: {
max: 133,
// startAngle: 225,
// endAngle: -180,
clockwise: true,
show: false
},
radiusAxis: {
type: "category",
show: true,
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
series: [
{
name: "",
type: "bar",
roundCap: false,
barWidth: 30,
showBackground: true,
backgroundStyle: {
color: "rgba(66, 66, 66, .3)",
},
data: [100],
coordinateSystem: "polar",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "#16CEB9",
},
{
offset: 1,
color: "#6648FF",
},
]),
},
},
},
],
})
},
methods: {},
computed: {
@ -98,7 +245,7 @@ export default {
}
};
</script>
<style scoped>
<style scoped lang="less">
.app-container {
background-image: url("../../../assets/board/boardBg1.jpg");
background-repeat: no-repeat;
@ -110,6 +257,13 @@ export default {
left: 0;
}
.subTitle {
position: absolute;
transform: translate(-50%, -50%);
font-size: 1.2vw;
color: #d6eaed;
letter-spacing: 0.1vw;
}
.headTitle {
position: absolute;
top: 5%;
@ -226,7 +380,7 @@ export default {
position: absolute;
top: 17%;
left: 3.3%;
width: 93.4%;
width: 74.8%;
height: 78%;
overflow: auto;
@ -236,7 +390,7 @@ export default {
.item {
display: inline-block;
width: calc(25% - 1vw);
width: calc(33% - 1vw);
height: 13.91vw;
margin: 0.5vw;
position: relative;
@ -334,4 +488,20 @@ export default {
}
}
.oee {
position: absolute;
top: 23%;
left: 78%;
width: 20%;
height: 30%;
}
.energy {
position: absolute;
top: 63%;
left: 78%;
width: 20%;
height: 30%;
}
</style>

85
src/views/board/board2/index.vue
Unescape Escape View File

@ -3,23 +3,24 @@
<div class="headTitle">注塑车间设备效率监控平台</div>
<div class="chart1">
<Chart ref="chart1"></Chart>
<div class="text">当前在线数量：9</div>
<div class="numText">当前在线数量：9</div>
</div>
<div class="chart2">
<Chart ref="chart2"></Chart>
<div class="text">当前在线数量：9</div>
<div class="numText">当前关机数量：9</div>
</div>
<div class="chart3">
<Chart ref="chart3"></Chart>
<div class="text">当前在线数量：9</div>
<div class="numText">当前故障数量：9</div>
</div>
<div class="chart4">
<Chart ref="chart4"></Chart>
<div class="text">当前在线数量：9</div>
<div class="numText">当前待机数量：9</div>
</div>
<div class="subTitle" style="top: 41.1%;left: 5.5%;">设备信息</div>
<div class="subTitle" style="top: 11.5%;left: 68.5%;">生产统计</div>
<div class="subTitle" style="top: 41.1%;left: 68.5%;">稼动率/OEE</div>
<!-- <div class="subTitle" style="top: 41.1%;left: 68.5%;">稼动率/OEE</div>-->
<div class="subTitle" style="top: 41.1%;left: 68.5%;">OEE</div>
<div class="subTitle" style="top: 70.5%;left: 68.5%;">故障设备排名</div>
<div class="scrollTable">
@ -118,19 +119,19 @@
</div>
<div class="fault1">
<div class="faultText1" style="top: 79%;left: 71.9%;">01</div>
<div class="faultText1" style="top: 82%;left: 71.9%;">焊接设备001</div>
<div class="faultText1" style="top: 82%;left: 71.9%;">注塑设备001</div>
<div class="faultText2" style="top: 86%;left: 71.9%;">故障率：46% 故障次数：10</div>
<div class="faultText2" style="top: 88%;left: 71.9%;">故障总时长：9min</div>
</div>
<div class="fault2">
<div class="faultText1" style="top: 79%;left: 81.7%;">02</div>
<div class="faultText1" style="top: 82%;left: 81.7%;">焊接设备002</div>
<div class="faultText1" style="top: 82%;left: 81.7%;">注塑设备002</div>
<div class="faultText2" style="top: 86%;left: 81.7%;">故障率：46% 故障次数：10</div>
<div class="faultText2" style="top: 88%;left: 81.7%;">故障总时长：9min</div>
</div>
<div class="fault3">
<div class="faultText1" style="top: 79%;left: 91.4%;">03</div>
<div class="faultText1" style="top: 82%;left: 91.4%;">焊接设备003</div>
<div class="faultText1" style="top: 82%;left: 91.4%;">注塑设备003</div>
<div class="faultText2" style="top: 86%;left: 91.4%;">故障率：46% 故障次数：10</div>
<div class="faultText2" style="top: 88%;left: 91.4%;">故障总时长：9min</div>
</div>
@ -655,36 +656,36 @@ export default {
},
],
series: [
{
name: "稼动率",
type: "line",
showAllSymbol: true,
symbol: "circle",
symbolSize: 5,
lineStyle: {
normal: {
color: "#2FCCE9",
shadowColor: "rgba(0, 0, 0, .3)",
shadowBlur: 0,
shadowOffsetY: 5,
shadowOffsetX: 5,
},
},
itemStyle: {
color: "#2FCCE9",
borderColor: "#2FCCE9",
borderWidth: 3,
shadowColor: "rgba(0, 0, 0, .3)",
shadowBlur: 0,
shadowOffsetY: 2,
shadowOffsetX: 2,
},
tooltip: {
show: false,
},
data: [17, 27, 38, 19, 28],
},
// {
// name: "稼动率",
// type: "line",
// showAllSymbol: true,
// symbol: "circle",
// symbolSize: 5,
// lineStyle: {
// normal: {
// color: "#2FCCE9",
// shadowColor: "rgba(0, 0, 0, .3)",
// shadowBlur: 0,
// shadowOffsetY: 5,
// shadowOffsetX: 5,
// },
// },
//
// itemStyle: {
// color: "#2FCCE9",
// borderColor: "#2FCCE9",
// borderWidth: 3,
// shadowColor: "rgba(0, 0, 0, .3)",
// shadowBlur: 0,
// shadowOffsetY: 2,
// shadowOffsetX: 2,
// },
// tooltip: {
// show: false,
// },
// data: [17, 27, 38, 19, 28],
// },
{
name: "OEE",
type: "line",
@ -724,8 +725,8 @@ export default {
return Array(222).fill(0).map(i => {
return {
value1: 'PRES001',
value2: '焊接设备001',
value3: '自动焊接机',
value2: '注塑设备001',
value3: '伊之密注塑机',
value4: '98.76%',
value5: '87.65%',
value6: '0%',
@ -770,8 +771,7 @@ export default {
letter-spacing: 0.1vw;
}
.chart1, .chart2, .chart3, .chart4 {
.text {
.numText {
position: absolute;
top: 80%;
left: 50%;
@ -779,7 +779,6 @@ export default {
font-size: 0.8vw;
color: #fff;
white-space: nowrap;
}
}
.chart1 {

2346
src/views/board/board3/index.vue
View File

File diff suppressed because it is too large Load Diff

1042
src/views/board/board3/index2.vue
View File

File diff suppressed because it is too large Load Diff

1412
src/views/board/week2/index.vue
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save