hanzhengzheng/screenFront
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加木工展静态大屏

Browse Source
This commit is contained in:
hzz 2024-03-15 17:03:17 +08:00
parent a044c62850
commit c11465e915
3 changed files with 283 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/Exhibition/CIFM/components/BoardBar.vue
View File

@ -54,7 +54,7 @@ let config = reactive({
evenRowBGC: 'transparent', evenRowBGC: 'transparent',
wrap: [false, true, false, false, false], wrap: [false, true, false, false, false],
columnWidth: [80, 295, 145, 110, 110,85], columnWidth: [80, 295, 145, 110, 110,85],
align: ['center', 'left', 'center', 'center', 'center', 'center'], align: ['center', 'center', 'center', 'center', 'center', 'center'],
rowNum: prop.rowNum, rowNum: prop.rowNum,
waitTime: 3000, waitTime: 3000,
}) })

245
src/views/Exhibition/CIFM/index.ts Normal file
View File

@ -0,0 +1,245 @@
export function getTopDevice() {
return {
"code": 200,
"msg": "操作成功",
"data": {
"材料缝制设备": {
"value": [
[
"无梭机＋裁切机",
"101",
"123m",
"95.0%",
"2"
],
[
"输送机",
"102",
"123m",
"80.0%",
"2"
],[
"厚料床垫锁边机",
"103",
"123m",
"80.0%",
"1"
],
],
"chart": {
"series": [
{
"data": [
50,100,70
],
"name": "计划完成"
},
{
"data": [
70,70,80
],
"name": "实际完成"
}
],
"xData": [
"无移机+裁切机",
"输送机",
"厚料床热锁边利",
]
}
},
"包装设备": {
"value": [
[
"滚胶机",
"201",
"123min",
"95.0%",
"2"
],
[
"平面压板机",
"202",
"123min",
"95.0%",
"1"
],
[
"床垫翻转围边机1",
"203",
"123min",
"95.0%",
"2"
],
[
"输送线1",
"204",
"123min",
"95.0%",
"2"
],
[
"质检台1",
"205",
"123min",
"95.0%",
"2"
],
[
"储料架",
"206",
"123min",
"95.0%",
"0"
],
[
"输送线2",
"207",
"123min",
"95.0%",
"0"
],
[
"质检台2",
"208",
"123min",
"95.0%",
"2"
],
[
"输送线3",
"209",
"123min",
"95.0%",
"2"
],
[
"床垫翻转围边机2",
"210",
"123min",
"95.0%",
"0"
],
[
"质检台3",
"211",
"123min",
"95.0%",
"0"
],
[
"输送线4",
"212",
"123min",
"95.0%",
"2"
],
[
"床垫翻转围边机3",
"213",
"123min",
"95.0%",
"1"
],
[
"输送线5",
"214",
"123min",
"95.0%",
"0"
],
[
"床垫翻转围边机4",
"215",
"123min",
"95.0%",
"2"
],
[
"输送线6",
"216",
"123min",
"95.0%",
"0"
],
[
"床垫翻转围边机5",
"217",
"123min",
"95.0%",
"0"
]
],
"chart": {
"series": [
{
"data": [
45,100,80,45,80
],
"name": "计划完成"
},
{
"data": [
70,70,80,70,80
],
"name": "实际完成"
}
],
"xData": [
"滚胶机",
"平面乐板机",
"床垫翻转围边机1",
"床垫翻转围边机2",
"质检台"
]
}
},
"生产线设备": {
"value": [
[
"床垫压缩包装机",
"301",
"123m",
"95.0%",
"2"
],
[
"床垫薄膜包装机",
"302",
"123m",
"95.0%",
"2"
],
],
"chart": {
"series": [
{
"data": [
50,
100,
],
"name": "计划完成"
},
{
"data": [
70,70
],
"name": "实际完成"
}
],
"xData": [
"床垫压缩包装机",
"床垫薄膜包装机",
]
}
},
}
}
}
export function getCismaList(type) {
return {"code":200,"msg":"操作成功","data":{"devnum":{"all":22,"wait":3,"off":7,"on":12}}}
}

62
src/views/Exhibition/CIFM/index.vue
View File

@ -2,14 +2,15 @@
<div class="container"> <div class="container">
<div class="header"> <div class="header">
<div class="title"> <div class="title">
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'再登工况物联系统'" :titleTip="[]" <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'床垫生产线物联管理系统'" :titleTip="[]"
:typeFun="['time']" :alarmType="[]"></header2> :typeFun="['time']" :alarmType="[]"></header2>
</div> </div>
</div> </div>
<div class="content"> <div class="content">
<div class="left"> <div class="left">
<NewBoder :title="'冲孔设备'"> <NewBoder :title="'床垫材料缝制设备'">
<BoardBar :data="chongkong.value" :xData="chongkong.chart.xData" :seriesData="chongkong.chart.series" :rowNum="3"> <BoardBar :data="chongkong.value" :xData="chongkong.chart.xData"
:seriesData="chongkong.chart.series" :rowNum="3">
</BoardBar> </BoardBar>
</NewBoder> </NewBoder>
</div> </div>
@ -23,14 +24,14 @@
</NewBoder> </NewBoder>
</div> </div>
<div class="cb"> <div class="cb">
<NewBoder :title="'缝纫设备'"> <NewBoder :title="'床垫包装设备'">
<BoardBar :data="fengren.value" :xData="fengren.chart.xData" :seriesData="fengren.chart.series" <BoardBar :data="fengren.value" :xData="fengren.chart.xData" :seriesData="fengren.chart.series"
:rowNum="1"></BoardBar> :rowNum="1"></BoardBar>
</NewBoder> </NewBoder>
</div> </div>
</div> </div>
<div class="right"> <div class="right">
<NewBoder :title="'版房设备'"> <NewBoder :title="'床垫生产线设备'">
<BoardBar :data="banfang.value" :xData="banfang.chart.xData" :seriesData="banfang.chart.series" <BoardBar :data="banfang.value" :xData="banfang.chart.xData" :seriesData="banfang.chart.series"
:rowNum="4"></BoardBar> :rowNum="4"></BoardBar>
</NewBoder> </NewBoder>
@ -62,8 +63,7 @@ import BoardBar from "./components/BoardBar.vue";
import ringChart from "./components/ringChart.vue"; import ringChart from "./components/ringChart.vue";
import StepItem from './components/StepItem.vue' import StepItem from './components/StepItem.vue'
import { getTopDevice, getCismaList } from '@/http/cisma' import { getTopDevice, getCismaList } from './index'
import {scDeviceList} from '@/http/Exhibition/SCISMA'
import { connectWebsocket, closeWebsocket } from "@/utils/websocket" import { connectWebsocket, closeWebsocket } from "@/utils/websocket"
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
@ -76,17 +76,17 @@ let devnum = reactive({
}) })
let stepList = reactive([ let stepList = reactive([
{ {
name: '冲孔设备', name: '材料缝制设备',
total: 0, total: 0,
online: 0, online: 0,
}, },
{ {
name: '缝纫设备', name: '生产线设备',
total: 0, total: 0,
online: 0, online: 0,
}, },
{ {
name: '版房设备', name: '包装设备',
total: 0, total: 0,
online: 0, online: 0,
} }
@ -136,16 +136,11 @@ let ringData = computed(() => {
] ]
}) })
function setData(data:any) { function setData(data: any) {
data.value = data.value.map((item, index) => { data.value = data.value.map((item, index) => {
item.unshift(index + 1) item.unshift(index + 1)
return item return item
}) })
data.chart.xData = data.chart.xData.map((item) => {
let index = data.value.findIndex((i) => i[2] == item)
let label = data.value[index][1]
return label
})
data.chart.series = data.chart.series.map((item) => { data.chart.series = data.chart.series.map((item) => {
item.type = 'bar' item.type = 'bar'
@ -162,29 +157,30 @@ function setData(data:any) {
let labelList = ref() let labelList = ref()
async function getTopDeviceData() { async function getTopDeviceData() {
let res = await scDeviceList() as any let res = await getTopDevice() as any
if (res.code === 200) { if (res.code === 200) {
// setfengren(res.data.缝纫设备) // setfengren(res.data.缝纫设备)
// setbanfang(res.data.版房设备) // setbanfang(res.data.版房设备)
// setcaijian(res.data.裁剪设备) // setcaijian(res.data.裁剪设备)
fengren.value = setData(res.data.缝纫设备) chongkong.value = setData(res.data.材料缝制设备)
banfang.value = setData(res.data.版房设备) banfang.value = setData(res.data.包装设备)
chongkong.value = setData(res.data.冲孔设备) fengren.value = setData(res.data.生产线设备)
labelList.value = []; labelList.value = [];
labelList.value.push(...fengren.value.value.map((item,i) => { labelList.value.push(...fengren.value.value.map((item, i) => {
return { label: item[2],index:i,name:'fengren',status:item[5]} return { label: item[2], index: i, name: 'fengren', status: item[5] }
})) }))
labelList.value.push(...banfang.value.value.map((item,i) => { labelList.value.push(...banfang.value.value.map((item, i) => {
return { label: item[2],index:i,name:'banfang',status:item[5]} return { label: item[2], index: i, name: 'banfang', status: item[5] }
})) }))
labelList.value.push(...chongkong.value.value.map((item,i) => { labelList.value.push(...chongkong.value.value.map((item, i) => {
return { label: item[2],index:i,name:'chongkong',status:item[5]} return { label: item[2], index: i, name: 'chongkong', status: item[5] }
})) }))
} }
} }
async function getCismaListData() { async function getCismaListData() {
let res = await getCismaList({s:'SC'}) as any let res = await getCismaList({ s: 'SC' }) as any
if (res.code === 200) { if (res.code === 200) {
devnum.on = res.data.devnum.on devnum.on = res.data.devnum.on
devnum.off = res.data.devnum.off devnum.off = res.data.devnum.off
@ -218,7 +214,7 @@ function getWebsocket(val) {
} }
devnum.on = labelList.value.filter((item) => item.status == '2').length devnum.on = labelList.value.filter((item) => item.status == '2').length
devnum.wait = labelList.value.filter((item) => item.status == '1'||item.status == '3').length devnum.wait = labelList.value.filter((item) => item.status == '1' || item.status == '3').length
devnum.off = labelList.value.filter((item) => item.status == '0').length devnum.off = labelList.value.filter((item) => item.status == '0').length
} }
@ -234,12 +230,14 @@ function errWebsocket(val) {
} }
onMounted(() => { onMounted(() => {
setTimeout(() => {
getTopDeviceData() getTopDeviceData()
getCismaListData() getCismaListData()
timer = setInterval(()=>{ }, 100)
getTopDeviceData() // timer = setInterval(()=>{
},1000*30) // getTopDeviceData()
connectWebsocket(null, null, getWebsocket, errWebsocket) // },1000*30)
// connectWebsocket(null, null, getWebsocket, errWebsocket)
document.getElementById('app').style.backgroundColor = '#0E0E0E' document.getElementById('app').style.backgroundColor = '#0E0E0E'
}) })