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

添加新的看板

Browse Source
master
suixy 5 days ago
parent d03e3d2fcf
commit d7ef2f65a5
8 changed files with 655 additions and 1 deletions
Show Stats Download Patch File Download Diff File

BIN
src/assets/board/boardBg3.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 840 KiB

BIN
src/assets/board/device.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
src/assets/board/errorBg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
src/assets/board/errorIcon.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1002 B

2
src/permission.js
Unescape Escape View File

@ -8,7 +8,7 @@ import { isRelogin } from '@/utils/request'
NProgress.configure({ showSpinner: false }) NProgress.configure({ showSpinner: false })
const whiteList = ['/login', '/board1', '/board2', '/board3', '/register', '/liner', '/caseShell2', '/foaming', '/foaming2', '/pourInto', '/finalAssembly', '/scanDown', '/week', '/week2', '/model'] const whiteList = ['/login', '/board1', '/board2', '/board3', '/board5', '/board6', '/register', '/liner', '/caseShell2', '/foaming', '/foaming2', '/pourInto', '/finalAssembly', '/scanDown', '/week', '/week2', '/model']
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
NProgress.start() NProgress.start()

10
src/router/index.js
Unescape Escape View File

@ -119,6 +119,16 @@ export const constantRoutes = [
component: () => import('@/views/board/board3/index'), component: () => import('@/views/board/board3/index'),
name: 'Board4', name: 'Board4',
meta: {title: '生产进度监控', icon: '404',} meta: {title: '生产进度监控', icon: '404',}
}, {
path: 'board5',
component: () => import('@/views/board/board4/index'),
name: 'Board4',
meta: {title: '数字化注塑车间管控中心', icon: '404',}
}, {
path: 'board6',
component: () => import('@/views/board/board5/index'),
name: 'Board4',
meta: {title: '数字化注塑车间管控中心', icon: '404',}
}, },
{ {
path: 'liner', path: 'liner',

644
src/views/board/board4/index.vue
Unescape Escape View File

@ -0,0 +1,644 @@
<template>
<div class="app-container">
<div class="headTitle">数字化注塑车间管控中心</div>
<div class="centerDevice"></div>
<div class="text1" style="top: 14.7%;left: 5.5%;">今日计划数: 432</div>
<div class="text1" style="top: 14.7%;left: 16.8%;">今日完成数: 432</div>
<div class="text1" style="top: 24%;left: 5.5%;">今日差异数: 432</div>
<div class="text1" style="top: 24%;left: 16.8%;">今日完成率: 98%</div>
<div class="text1" style="top: 12%;left: 29%;">今日用水(t):</div>
<div class="text1" style="top: 12%;left: 44%;">今日用电(kwh):</div>
<div class="text1" style="top: 12%;left: 59%;">今日用气(m³):</div>
<div class="text1" style="top: 19.1%;left: 75%;">正常: 300</div>
<div class="text1" style="top: 19.1%;left: 82.4%;">告警: 01</div>
<div class="text1" style="top: 19.1%;left: 89.8%;">停机: 01</div>
<div class="num1" style="color:#63CDFA;top: 17%;left: 30.05%;">1</div>
<div class="num1" style="color:#63CDFA;top: 17%;left: 32.55%;">2</div>
<div class="num1" style="color:#63CDFA;top: 17%;left: 35.05%;">3</div>
<div class="num1" style="color:#63CDFA;top: 17%;left: 37.55%;">4</div>
<div class="num1" style="color:#63CDFA;top: 17%;left: 40.05%;">5</div>
<div class="num1" style="color:#69FD80;top: 17%;left: 45.05%;">6</div>
<div class="num1" style="color:#69FD80;top: 17%;left: 47.55%;">7</div>
<div class="num1" style="color:#69FD80;top: 17%;left: 50.05%;">8</div>
<div class="num1" style="color:#69FD80;top: 17%;left: 52.55%;">9</div>
<div class="num1" style="color:#69FD80;top: 17%;left: 55.05%;">0</div>
<div class="num1" style="color:#FEF26A;top: 17%;left: 60.05%;">1</div>
<div class="num1" style="color:#FEF26A;top: 17%;left: 62.55%;">2</div>
<div class="num1" style="color:#FEF26A;top: 17%;left: 65.05%;">3</div>
<div class="num1" style="color:#FEF26A;top: 17%;left: 67.55%;">4</div>
<div class="num1" style="color:#FEF26A;top: 17%;left: 70.05%;">5</div>
<div class="text2" style="top: 12.7%;left: 84.7%;">设备总数:320</div>
<div class="text2" style="top: 41%;left: 84.7%;">总维修次数:320</div>
<div class="text3" style="top: 35.15%;left: 5.5%;">工单进度</div>
<div class="text3" style="top: 35.15%;left: 75%;">维修分析</div>
<div class="text3" style="top: 63.05%;left: 5.5%;">质量追溯</div>
<div class="text3" style="top: 63.05%;left: 30.2%;">设备分析</div>
<div class="text3" style="top: 63.05%;left: 75%;">告警趋势</div>
<div class="deviceError">
<div class="icon"></div>
<div class="text" style="left: 18%">设备1#</div>
<div class="text" style="left: 42%;color: #F42223">产品未顶出</div>
<div class="text" style="left: 75%">66:66:66</div>
</div>
<div class="scrollTable">
<div style="background-color: #05346044">
<div class="scrollTableItem" style="font-weight: bold;width: 25%">
型号
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 16.66%">
计划数
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 16.66%">
完成数
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 16.66%">
差异数
</div>
<div class="scrollTableItem" style="font-weight: bold;width: 25%">
执行进度
</div>
</div>
<vue-seamless-scroll
:class-option="scrollTableOption"
:data="scrollTableData"
class="case-item"
style="height: calc(100% - 20px - 1vw - 0.4vw);overflow: hidden;"
>
<div
v-for="(item, index) in scrollTableData"
:key="index"
>
<div :style='"background-color:" + ((index % 2 === 0)? "#05346022":"#05346044") '>
<div
class="scrollTableItem" style="width: 25%">
{{ item.value1 }}
</div>
<div
class="scrollTableItem" style="width: 16.66%">
{{ item.value2 }}
</div>
<div
class="scrollTableItem" style="width: 16.66%">
{{ item.value3 }}
</div>
<div
class="scrollTableItem" style="width: 16.66%">
{{ item.value4 }}
</div>
<div
class="scrollTableItem" style="width: 25%">
{{ item.value5 }}
</div>
</div>
</div>
</vue-seamless-scroll>
</div>
<div class="repairTimes">
<div class="item" v-for="i in 3">
<div class="num">{{ i }}</div>
<div class="deviceName">SC-228NE</div>
<div class="schedule">
<div class="progressBar" :style="{width: 100 - ((i-1) * 10) + '%'}"></div>
</div>
<div class="times">{{ 10 - i + 1 }}次</div>
</div>
</div>
<div class="chart1">
<Chart ref="chart1"></Chart>
</div>
<div class="chart2">
<Chart ref="chart2"></Chart>
</div>
<div class="chart3">
<Chart ref="chart3"></Chart>
</div>
</div>
</template>
<script>
import vueSeamlessScroll from "vue-seamless-scroll";
import Chart from "@/components/board/Chart.vue";
import * as echarts from "echarts";
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
export default {
components: {
vueSeamlessScroll, Chart
},
name: "Liner",
data() {
return {
scrollTableOption: {
step: 0.5, // 数值越大速度滚动越快
limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 0,
},
}
},
mounted() {
const dataMap = {
'合格数': 100,
'不合格数': 100
}
this.$refs.chart1.setData({
title: {
y: 'center',
left: '60%',
text: `{dot1|●} {name|合格数} ：{value|1000}\n\n\n{dot2|●} {name|不合格数} ：{value|100}`,
textStyle: {
color: '#ffffff',
rich: {
dot1: {
fontSize: 16,
color: '#ffffff',
},
dot2: {
fontSize: 16,
color: '#4E97FF',
},
name: {
color: '#fff',
fontSize: 18,
},
value: {
color: '#fff',
fontSize: 22,
fontWeight: '800',
}
}
}
},
series: [
{
type: "pie",
center: ["30%", "50%"],
radius: ['57%', '63%'],
itemStyle: {
color: '#6666'
},
labelLine: {
show: false
},
data: [1]
},
{
type: "pie",
label: {
show: false,
},
center: ["30%", "50%"],
radius: ['54%', '66%'],
clockwise: false,
labelLine: {
show: false
},
itemStyle: {
color: '#4E97FF'
},
data: [
{
value: 20,
name: '不合格数',
itemStyle: {
color: '#4E97FF'
},
},
{
value: 80,
name: '合格数',
itemStyle: {
color: '#0000'
},
},
]
},
]
})
this.$refs.chart2.setData({
grid: {
top: "15%",
left: "10%",
right: "5%",
bottom: "15%",
},
xAxis: [
{
type: "category",
boundaryGap: true,
axisLine: {
show: true,
},
splitArea: {
color: "#f00",
lineStyle: {
color: "#f00",
},
},
axisLabel: {
color: "#fff",
fontSize: 0.8 * vw,
interval: 0,
},
splitLine: {
show: false,
},
data: ["2025-10-01", "2025-10-02", "2025-10-03", "2025-10-04", "2025-10-05"],
},
],
yAxis: [
{
boundaryGap: true,
type: "value",
min: 0,
splitNumber: 4,
splitLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,0.1)",
},
},
axisLine: {
show: true,
},
axisLabel: {
show: true,
textStyle: {
color: "#d1e6eb",
},
},
axisTick: {
show: true,
},
},
],
series: [
{
name: "OEE",
type: "bar",
itemStyle: {
color: "#0C2CD8",
},
tooltip: {
show: false,
},
data: [27, 31, 20, 31, 10],
},
],
})
this.$refs.chart3.setData({
grid: {
top: "15%",
left: "10%",
right: "5%",
bottom: "15%",
},
xAxis: [
{
type: "category",
boundaryGap: true,
axisLine: {
show: true,
},
splitArea: {
color: "#f00",
lineStyle: {
color: "#f00",
},
},
axisLabel: {
color: "#fff",
fontSize: 0.8 * vw,
interval: 0,
},
splitLine: {
show: false,
},
data: ["2025-10-01", "2025-10-02", "2025-10-03", "2025-10-04", "2025-10-05"],
},
],
yAxis: [
{
boundaryGap: true,
type: "value",
min: 0,
splitNumber: 4,
splitLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,0.1)",
},
},
axisLine: {
show: true,
},
axisLabel: {
show: true,
textStyle: {
color: "#d1e6eb",
},
},
axisTick: {
show: true,
},
},
],
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: "OEE",
type: "line",
showAllSymbol: true,
symbol: "circle",
symbolSize: 5,
lineStyle: {
normal: {
color: "#E3A731",
shadowColor: "rgba(0, 0, 0, .3)",
shadowBlur: 0,
shadowOffsetY: 5,
shadowOffsetX: 5,
},
},
itemStyle: {
color: "#E3A731",
borderColor: "#E3A731",
borderWidth: 3,
shadowColor: "rgba(0, 0, 0, .3)",
shadowBlur: 0,
shadowOffsetY: 2,
shadowOffsetX: 2,
},
tooltip: {
show: false,
},
data: [27, 31, 20, 31, 10],
},
],
})
},
methods: {},
computed: {
scrollTableData() {
return Array(222).fill(0).map(i => {
return {
value1: Math.ceil(Math.floor(Math.random() * 100)) + 'WD',
value2: Math.ceil(Math.floor(Math.random() * 100)),
value3: Math.ceil(Math.floor(Math.random() * 100)),
value4: Math.ceil(Math.floor(Math.random() * 100)),
value5: Math.ceil(Math.floor(Math.random() * 100)) + '%',
}
})
}
},
beforeDestroy() {
}
};
</script>
<style scoped lang="less">
.headTitle {
position: absolute;
top: 5%;
left: 50%;
transform: translate(-50%, -100%);
font-size: 1.5vw;
color: #d6eaed;
letter-spacing: 0.3vw;
}
.app-container {
position: absolute;
top: 0;
left: 0;
background-image: url("../../../assets/board/boardBg3.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
height: 100%;
}
.text1 {
position: absolute;
transform: translateY(-50%);
letter-spacing: 0.1vw;
font-size: 0.9vw;
color: #fff;
}
.text2 {
position: absolute;
transform: translate(-50%, -50%);
letter-spacing: 0.1vw;
font-size: 1.1vw;
color: #fff;
}
.text3 {
position: absolute;
transform: translateY(-50%);
letter-spacing: 0.1vw;
font-size: 1.1vw;
color: #fff;
}
.num1 {
position: absolute;
transform: translate(-50%, -50%);
letter-spacing: 0.1vw;
font-size: 1.3vw;
color: #eee;
}
.centerDevice {
position: absolute;
top: 22%;
left: 28.6%;
width: 42.9%;
height: 36.4%;
background-image: url("../../../assets/board/device.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.deviceError {
position: absolute;
top: 24.5%;
left: 74%;
width: 21.5vw;
height: 2.275vw;
background-image: url("../../../assets/board/errorBg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
.icon {
position: absolute;
top: 50%;
left: 9%;
transform: translate(-50%, -50%);
width: 1.32vw;
height: 1.2vw;
background-image: url("../../../assets/board/errorIcon.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.text {
position: absolute;
top: 50%;
transform: translateY(-50%);
letter-spacing: 0.1vw;
font-size: 0.8vw;
color: #fff;
}
}
.scrollTable {
position: absolute;
top: 38%;
left: 3.3%;
width: 23.8%;
height: 20%;
}
.scrollTableItem {
color: #65CDF9;
margin: auto 0px;
padding: 10px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
display: inline-block;
width: 10%;
font-size: 1vw;
}
.repairTimes {
position: absolute;
top: 44%;
left: 72.8%;
width: 23.8%;
height: 14.3%;
.item {
width: 100%;
height: 33.33%;
position: relative;
.num {
position: absolute;
top: 50%;
left: 8%;
width: 1vw;
height: 1vw;
font-size: 0.8vw;
text-align: center;
transform: translate(-50%, -50%);
line-height: calc(1vw - 2px);
color: #1B61D8;
background-color: #092C52;
border: 1px solid #0D598F;
}
.deviceName {
position: absolute;
top: 50%;
left: 15%;
font-size: 0.8vw;
transform: translateY(-50%);
color: #fff;
}
.schedule {
position: absolute;
top: 50%;
left: 35%;
transform: translateY(-50%);
width: 50%;
height: 8px;
border-radius: 4px;
background-color: #172B47;
overflow: hidden;
.progressBar {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: linear-gradient(to right, #1068E4, #4E99FF);
}
}
.times {
position: absolute;
top: 50%;
left: 87%;
font-size: 0.8vw;
transform: translateY(-50%);
color: #60BAEA;
}
}
}
.chart1 {
position: absolute;
top: 66%;
left: 3.3%;
width: 23.8%;
height: 29%;
}
.chart2 {
position: absolute;
top: 66%;
left: 28%;
width: 44%;
height: 29%;
}
.chart3 {
position: absolute;
top: 66%;
left: 72.8%;
width: 23.8%;
height: 29%;
}
</style>

0
src/views/board/board5/index.vue
Unescape Escape View File

Write Preview
Loading…
Cancel
Save