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-22 17:07:09 +08:00
parent e3046cab92
commit 64772a03a1
12 changed files with 187 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/http/Exhibition/CIFM/index.ts
View File

@ -5,3 +5,8 @@ export function scatteredLayoutExhibitionDevice(data){
return get('/screen/cisma/scatteredLayoutExhibitionDevice',data)
}
//获取设备在线状态、设备列表
export function cismaDeviceInfo(data){
return get('/screen/cisma/cismaDeviceInfo',data)
}

105
src/views/Exhibition/CIFM/child.vue
View File

@ -3,7 +3,7 @@
<div class="header">
<div class="title">
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'再登工况物联管理系统'" :titleTip="[]"
:typeFun="['time','comback']" :alarmType="[]"></header2>
:typeFun="['time', 'comback']" :alarmType="[]"></header2>
</div>
</div>
<div class="content">
@ -12,7 +12,7 @@
<BorderView :title="'工作速度'">
<div class="box-lt">
<div class="pie">
<span>200</span>
<span>{{ speed }}</span>
<span>rpm/min</span>
</div>
</div>
@ -28,7 +28,7 @@
</div>
<div class="center">
<BorderView :title="'设备状态总览'">
<ItemCard :data="device_data"></ItemCard>
<ItemCard :data="device_data" :imgSrc="getImgSrc"></ItemCard>
</BorderView>
</div>
<div class="right">
@ -79,42 +79,106 @@ import header2 from './components/header2.vue'
import BorderView from './components/Border.vue'
import DynamicChart from './components/DynamicChart.vue'
import ItemCard from './components/ItemCard.vue'
import {scatteredLayoutExhibitionDevice} from '@/http/Exhibition/CIFM'
import { scatteredLayoutExhibitionDevice, cismaDeviceInfo } from '@/http/Exhibition/CIFM'
import { connectWebsocket, closeWebsocket } from "@/utils/websocket"
import {useRouter,useRoute} from 'vue-router'
import { useRouter, useRoute } from 'vue-router'
let route = useRoute()
console.log(route.params.name);
let xData = ref(['订单任务量', '任务完成量'])
let series = ref([{
name: '完成量',
type: 'bar',
data: [200, 300]
label: {
show: true,
position: 'outside',
formatter: '{@score}'
},
data: [200, 300],
barWidth: '35%',
}])
let device_data = ref([
{ key: '机架号', value: '102014422' },
{ key: '设备名称', value: '床笠裙边机', value_style: { fontSize: '26px' } },
{ key: '设备状态', value: 2 },
{ key: '稼动率', value: '90%' },
{ key: '机架号', value: '123456' },
{ key: '工作时长', value: '0min' },
])
let getImgSrc = computed(() => {
let name: string = Array.isArray(route.params.name) ? route.params.name[0] : route.params.name;
let imgSrc = {
'床笠裙边机': require('./images/qbj.png'),
'电脑绗绣机': require('./images/hxj.png'),
'电脑绣花机': require('./images/xhj.png'),
'全自动缝纫机(零等待)': require('./images/ldd.png')
}
return imgSrc[name]
})
//转速
let speed = ref(200)
function scatteredLayoutExhibitionDeviceFun() {
scatteredLayoutExhibitionDevice({s:'WME'}).then((res:any) => {
scatteredLayoutExhibitionDevice({ s: 'WME' }).then((res: any) => {
if (res.code == 200) {
let data = res.data
let name: string = Array.isArray(route.params.name) ? route.params.name[0] : route.params.name;
let device_info = data[name]
device_data.value = [
{ key: '机架号', value: device_info['label'] },
{ key: '设备名称', value: device_info['name'], value_style: { fontSize: '26px' } },
{ key: '设备状态', value: device_info['status'] },
{ key: '稼动率', value: device_info['ratio'] },
{ key: '机架号', value: device_info['label'] },
{ key: '工作时长', value: device_info['workTime'] },
]
console.log(route.params.name,'11111');
if (name == '床笠裙边机') {
device_data.value.push({ key: '花型编号', value: device_info['fileName'] })
}
if (device_info['status'] == 2) {
speed.value = 200
} else {
speed.value = 0
}
cismaDeviceInfoFun(device_info['id'])
}
})
}
let config = reactive({
function cismaDeviceInfoFun(id) {
cismaDeviceInfo({ s: id }).then((res: any) => {
if (res.code == 200) {
let data = res.data
optionData.series = [{
name: '完成量',
type: 'bar',
label: {
show: true,
position: 'outside',
formatter: '{@score} ' + unit[Array.isArray(route.params.name) ? route.params.name[0] : route.params.name]
},
data: [data.dingdan.renwu, data.dingdan.wancheng],
barWidth: '35%',
}]
let config_data = data.weihu.map((item, index) => {
return [index + 1, item.taskType, item.date, item.status, item.name]
})
config.value = {
header: ['序号', '类型', '日期', '状态', '操作人员'],//, '故障率'
headerBGC: 'transparent',
oddRowBGC: 'transparent',
evenRowBGC: 'transparent',
wrap: [false, false, false, false, false],
columnWidth: [80, 150, 145, 110, 110, 185],
align: ['center', 'center', 'center', 'center', 'center', 'center'],
rowNum: 5,
waitTime: 3000,
data: config_data
}
}
})
}
let config = ref({
header: ['序号', '类型', '日期', '状态', '操作人员'],//, '故障率'
headerBGC: 'transparent',
oddRowBGC: 'transparent',
@ -133,6 +197,13 @@ let config = reactive({
[6, '维护', '2024-02-08', '完成', '1001'],
]
})
let unit = {
'床笠裙边机': '床',
'电脑绗绣机': 'cm',
'电脑绣花机': '件',
'全自动缝纫机(零等待)': '件'
}
let optionData = reactive({
backgroundColor: 'transparent',
legend: {
@ -163,7 +234,7 @@ let optionData = reactive({
yAxis: [
{
type: 'value',
name: '产量',
name: '订单任务：\r\n单位(' + unit[Array.isArray(route.params.name) ? route.params.name[0] : route.params.name] + ")",
axisLabel: {
fontSize: 14
}
@ -180,11 +251,12 @@ function getWebsocket(val) {
if (data.type == 'WorkingState') {
let { RackNumber, WorkingState } = data.msg
let { RackNumber, WorkingState, speed } = data.msg
if (device_data.value[0].value == RackNumber) {
device_data.value[1].value = WorkingState
speed.value = speed
}
}
@ -198,6 +270,9 @@ function errWebsocket(val) {
}
onMounted(() => {
scatteredLayoutExhibitionDeviceFun()
setInterval(() => {
scatteredLayoutExhibitionDeviceFun()
}, 60000)
connectWebsocket(null, null, getWebsocket, errWebsocket)
})
onUnmounted(() => {

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

@ -2,7 +2,7 @@
<div class="board-bar">
<div class="bb-top">
<div class="dev-title">
<div class="title-item" v-for="(item, index) in header" :style="{ width: computedWidth(columnWidth[index]) }">
<div class="title-item" v-for="(item, index) in header" :style="{ width: computedWidth(columnWidth[index]), 'text-align': align[index] }">
<text>{{ item }}</text></div>
</div>
<ZdScrollBoard ref="devList" class="dev-list" :config="config" />
@ -23,6 +23,10 @@ import { getCurrentInstance, onMounted, reactive, ref, computed, watch } from "v
const devList = ref(null);
const prop = defineProps({
header: {
type: Array,
default: ['序号', '设备名称', '设备编码', '完成率', '稼动率', '状态']
},
data: {
type: Array,
default: []
@ -40,8 +44,8 @@ const prop = defineProps({
default: 2
}
})
let header = ['序号', '设备名称', '设备编码','完成率', '稼动率', '状态']
let columnWidth = [90, 295, 145, 110, 110,85];
let columnWidth = [90, 280, 140, 140, 110,85];
let align:any = ['center', 'left', 'center', 'center', 'center', 'center'];
let sum = 850;
let computedWidth = (width: number) => {
@ -53,8 +57,8 @@ let config = reactive({
oddRowBGC: 'transparent',
evenRowBGC: 'transparent',
wrap: [false, true, false, false, false],
columnWidth: [80, 295, 145, 110, 110,85],
align: ['center', 'center', 'center', 'center', 'center', 'center'],
columnWidth: [80, 280, 130, 125, 110,85],
align: ['center', 'left', 'center', 'center', 'center', 'center'],
rowNum: prop.rowNum,
waitTime: 3000,
})

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

@ -24,6 +24,8 @@ const setCharts = () => {
}
watch(() => prop.optionData, (newVal, oldVal) => {
console.log(newVal,'1111111');
charts.setOption(newVal);
}, { deep: true })

35
src/views/Exhibition/CIFM/components/ItemCard.vue
View File

@ -1,34 +1,48 @@
<template>
<div class="item-card-container">
<div class="box-top">
<div class="top-item" v-for="(item, index) in data">
<div class="top-item" :style="{ width }" v-for="(item, index) in data">
<span class="key-text">{{ item.key }}:</span>
<span class="value-text" :class="{ status: index == 1 }"
:style="{ background: index == 1 ? status_color[item.value] : '' }">{{ index ==
1 ? '' : item.value }}</span>
<span class="value-text" :style="item?.value_style">
<div class="status" v-if="index == 1" :style="{background: status_color[item.value]}"></div>
<span v-else>{{ item.value }}</span>
</span>
</div>
</div>
<div class="box-bottom">
<img src="./../images/mjxhj.png" alt="">
<img :src="imgSrc" alt="">
</div>
</div>
</template>
<script setup lang='ts'>
import { computed } from 'vue'
const prop = defineProps({
data: {
type: Array as any,
default: () => []
},
imgSrc: {
type: String,
default: ''
},
rowNum: {
type: Number,
default: 2
}
})
let width = computed(() => {
return 100 / prop.rowNum + '%'
})
const status_color = {
'0': '#FF6E76',
'1': '#FDDD60',
'2': '#7CFFB2',
'3': '#FDDD60',
}
</script>
<style scoped>
@ -41,6 +55,7 @@ const status_color = {
justify-content: space-between;
}
.box-top {
width: 100%;
height: 123px;
@ -55,17 +70,17 @@ const status_color = {
width: 100%;
height: calc(100% - 123px);
display: flex;
justify-content: space-between;
justify-content: center;
align-items: center;
}
.box-bottom img {
max-width: 100%;
max-height: 100%;
}
.top-item {
width: 243px;
height: 50%;
display: flex;
justify-content: space-around;
@ -73,6 +88,7 @@ const status_color = {
box-sizing: border-box;
padding: 0 20px;
}
.key-text {
width: 60%;
font-size: 18px;
@ -89,6 +105,9 @@ const status_color = {
font-family: '华文新魏', sans-serif;
box-sizing: border-box;
padding-left: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.status {

BIN
src/views/Exhibition/CIFM/images/hxj.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 357 KiB

BIN
src/views/Exhibition/CIFM/images/ldd.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 181 KiB

BIN
src/views/Exhibition/CIFM/images/qbj.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 227 KiB

BIN
src/views/Exhibition/CIFM/images/xhj.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 231 KiB

70
src/views/Exhibition/CIFM/index.ts
View File

@ -8,20 +8,20 @@ export function getTopDevice() {
[
"无梭机＋裁切机",
"101",
"123m",
"95.0%",
"201m",
"94.5%",
"2"
],
[
"输送机",
"102",
"123m",
"638m",
"80.0%",
"2"
],[
"厚料床垫锁边机",
"103",
"123m",
"185m",
"80.0%",
"1"
],
@ -54,43 +54,43 @@ export function getTopDevice() {
[
"滚胶机",
"201",
"123min",
"95.0%",
"500min",
"92.0%",
"2"
],
[
"平面压板机",
"202",
"123min",
"95.0%",
"1220min",
"94.0%",
"1"
],
[
"床垫翻转围边机1",
"203",
"123min",
"95.0%",
"90.0%",
"2"
],
[
"输送线1",
"204",
"123min",
"95.0%",
"325min",
"85.0%",
"2"
],
[
"质检台1",
"205",
"123min",
"95.0%",
"852min",
"86.0%",
"2"
],
[
"储料架",
"206",
"123min",
"95.0%",
"663min",
"90.6%",
"0"
],
[
@ -110,64 +110,64 @@ export function getTopDevice() {
[
"输送线3",
"209",
"123min",
"185min",
"95.0%",
"2"
],
[
"床垫翻转围边机2",
"210",
"123min",
"95.0%",
"967min",
"93.0%",
"0"
],
[
"质检台3",
"211",
"123min",
"95.0%",
"550min",
"93.2%",
"0"
],
[
"输送线4",
"212",
"123min",
"95.0%",
"632min",
"85.0%",
"2"
],
[
"床垫翻转围边机3",
"213",
"123min",
"95.0%",
"852min",
"75.0%",
"1"
],
[
"输送线5",
"214",
"123min",
"95.0%",
"633min",
"92.0%",
"0"
],
[
"床垫翻转围边机4",
"215",
"123min",
"95.0%",
"199min",
"86.0%",
"2"
],
[
"输送线6",
"216",
"123min",
"664min",
"95.0%",
"0"
],
[
"床垫翻转围边机5",
"217",
"123min",
"95.0%",
"155min",
"89.0%",
"0"
]
@ -202,15 +202,15 @@ export function getTopDevice() {
[
"床垫压缩包装机",
"301",
"123m",
"95.0%",
"451m",
"90.0%",
"2"
],
[
"床垫薄膜包装机",
"302",
"123m",
"95.0%",
"220m",
"95.5%",
"2"
],
],

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

@ -10,7 +10,7 @@
<div class="left">
<NewBoder :title="'床垫材料缝制设备'">
<BoardBar :data="chongkong.value" :xData="chongkong.chart.xData"
:seriesData="chongkong.chart.series" :rowNum="3">
:seriesData="chongkong.chart.series" :header="temp_header" :rowNum="3">
</BoardBar>
</NewBoder>
</div>
@ -26,14 +26,14 @@
<div class="cb">
<NewBoder :title="'床垫包装设备'">
<BoardBar :data="fengren.value" :xData="fengren.chart.xData" :seriesData="fengren.chart.series"
:rowNum="1"></BoardBar>
:rowNum="1" :header="temp_header"></BoardBar>
</NewBoder>
</div>
</div>
<div class="right">
<NewBoder :title="'床垫生产线设备'">
<BoardBar :data="banfang.value" :xData="banfang.chart.xData" :seriesData="banfang.chart.series"
:rowNum="4"></BoardBar>
:rowNum="4" :header="temp_header"></BoardBar>
</NewBoder>
</div>
</div>
@ -74,6 +74,7 @@ let devnum = reactive({
off: 0,
wait: 0
})
let temp_header = ['序号', '设备名称', '设备编码', '工作时长', '稼动率', '状态']
let stepList = reactive([
{
name: '材料缝制设备',
@ -81,15 +82,16 @@ let stepList = reactive([
online: 0,
},
{
name: '生产线设备',
name: '包装设备',
total: 0,
online: 0,
},
{
name: '包装设备',
name: '生产线设备',
total: 0,
online: 0,
}
])
let fengren = ref({
value: [],

15
src/views/Exhibition/CIFM/main.vue
View File

@ -9,24 +9,24 @@
<div class="content">
<div class="left">
<BorderView :title="'床笠裙边机'" @click="pushTo('床笠裙边机')">
<ItemCard :data="qbj_data"></ItemCard>
<ItemCard :data="qbj_data" :imgSrc="imgSrc['qbj']"></ItemCard>
</BorderView>
</div>
<div class="center">
<div class="cc">
<BorderView :title="'电脑绗绣机'" @click="pushTo('电脑绗绣机')">
<ItemCard :data="hxj_data"></ItemCard>
<ItemCard :data="hxj_data" :imgSrc="imgSrc['hxj']" :rowNum="3"></ItemCard>
</BorderView>
</div>
<div class="cb">
<BorderView :title="'电脑绣花机'" @click="pushTo('电脑绣花机')">
<ItemCard :data="xhj_data"></ItemCard>
<ItemCard :data="xhj_data" :imgSrc="imgSrc['xhj']" :rowNum="3"></ItemCard>
</BorderView>
</div>
</div>
<div class="right">
<BorderView :title="'零等待皮革缝纫机'" @click="pushTo('全自动缝纫机(零等待)')">
<ItemCard :data="ldd_data"></ItemCard>
<ItemCard :data="ldd_data" :imgSrc="imgSrc['ldd']"></ItemCard>
</BorderView>
</div>
</div>
@ -58,7 +58,12 @@ import {useRouter} from 'vue-router'
let router = useRouter()
let imgSrc = reactive({
qbj:require('./images/qbj.png'),
hxj:require('./images/hxj.png'),
xhj:require('./images/xhj.png'),
ldd:require('./images/ldd.png')
})
let qbj_data = ref([