广州木机展大屏更新
This commit is contained in:
hzz
parent
815db97524
commit
e3046cab92
7
src/http/Exhibition/CIFM/index.ts
Normal file
7
src/http/Exhibition/CIFM/index.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import {get,post} from "@/utils/http"
|
||||
|
||||
//获取设备在线状态、设备列表
|
||||
export function scatteredLayoutExhibitionDevice(data){
|
||||
return get('/screen/cisma/scatteredLayoutExhibitionDevice',data)
|
||||
}
|
||||
|
||||
@ -306,7 +306,7 @@ const routes: Array<RouteRecordRaw> = [
|
||||
component: () => import("../views/Exhibition/CIFM/main.vue"),
|
||||
},
|
||||
{
|
||||
path: "/CIFMExhibitionMain_:id",
|
||||
path: "/CIFMExhibitionMain_:name",
|
||||
name: "CIFMExhibitionMainChild",
|
||||
component: () => import("../views/Exhibition/CIFM/child.vue"),
|
||||
},
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
</div>
|
||||
<div class="center">
|
||||
<BorderView :title="'设备状态总览'">
|
||||
<ItemCard :mjxhj_data="mjxhj_data"></ItemCard>
|
||||
<ItemCard :data="device_data"></ItemCard>
|
||||
</BorderView>
|
||||
</div>
|
||||
<div class="right">
|
||||
@ -79,6 +79,12 @@ 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 { connectWebsocket, closeWebsocket } from "@/utils/websocket"
|
||||
import {useRouter,useRoute} from 'vue-router'
|
||||
|
||||
let route = useRoute()
|
||||
console.log(route.params.name);
|
||||
|
||||
let xData = ref(['订单任务量', '任务完成量'])
|
||||
let series = ref([{
|
||||
@ -86,12 +92,28 @@ let series = ref([{
|
||||
type: 'bar',
|
||||
data: [200, 300]
|
||||
}])
|
||||
let mjxhj_data = reactive([
|
||||
let device_data = ref([
|
||||
{ key: '机架号', value: '102014422' },
|
||||
{ key: '设备状态', value: 2 },
|
||||
{ key: '稼动率', value: '90%' },
|
||||
{ key: '工作时长', value: '0min' },
|
||||
])
|
||||
function scatteredLayoutExhibitionDeviceFun() {
|
||||
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['status'] },
|
||||
{ key: '稼动率', value: device_info['ratio'] },
|
||||
{ key: '工作时长', value: device_info['workTime'] },
|
||||
]
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
let config = reactive({
|
||||
header: ['序号', '类型', '日期', '状态', '操作人员'],//, '故障率'
|
||||
headerBGC: 'transparent',
|
||||
@ -149,6 +171,38 @@ let optionData = reactive({
|
||||
],
|
||||
series: series.value
|
||||
})
|
||||
|
||||
|
||||
//socket
|
||||
function getWebsocket(val) {
|
||||
try {
|
||||
let data = JSON.parse(val)
|
||||
|
||||
|
||||
if (data.type == 'WorkingState') {
|
||||
let { RackNumber, WorkingState } = data.msg
|
||||
|
||||
|
||||
if (device_data.value[0].value == RackNumber) {
|
||||
device_data.value[1].value = WorkingState
|
||||
}
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
|
||||
}
|
||||
function errWebsocket(val) {
|
||||
// console.log(val);
|
||||
}
|
||||
onMounted(() => {
|
||||
scatteredLayoutExhibitionDeviceFun()
|
||||
connectWebsocket(null, null, getWebsocket, errWebsocket)
|
||||
})
|
||||
onUnmounted(() => {
|
||||
closeWebsocket()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="item-card-container">
|
||||
<div class="box-top">
|
||||
<div class="top-item" v-for="(item, index) in mjxhj_data">
|
||||
<div class="top-item" 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 ==
|
||||
@ -18,7 +18,7 @@
|
||||
<script setup lang='ts'>
|
||||
|
||||
const prop = defineProps({
|
||||
mjxhj_data: {
|
||||
data: {
|
||||
type: Array as any,
|
||||
default: () => []
|
||||
}
|
||||
@ -65,7 +65,7 @@ const status_color = {
|
||||
|
||||
|
||||
.top-item {
|
||||
width: 33%;
|
||||
width: 243px;
|
||||
height: 50%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
@ -9,23 +9,24 @@
|
||||
<div class="content">
|
||||
<div class="left">
|
||||
<BorderView :title="'床笠裙边机'" @click="pushTo('床笠裙边机')">
|
||||
<ItemCard :mjxhj_data="mjxhj_data"></ItemCard>
|
||||
<ItemCard :data="qbj_data"></ItemCard>
|
||||
</BorderView>
|
||||
</div>
|
||||
<div class="center">
|
||||
<div class="cc">
|
||||
<BorderView :title="'电脑绗绣机'" @click="pushTo('床笠裙边机')">
|
||||
<ItemCard :mjxhj_data="mjxhj_data"></ItemCard>
|
||||
<BorderView :title="'电脑绗绣机'" @click="pushTo('电脑绗绣机')">
|
||||
<ItemCard :data="hxj_data"></ItemCard>
|
||||
</BorderView>
|
||||
</div>
|
||||
<div class="cb">
|
||||
<BorderView :title="'电脑绣花机'" @click="pushTo('床笠裙边机')">
|
||||
<ItemCard :mjxhj_data="mjxhj_data"></ItemCard>
|
||||
<BorderView :title="'电脑绣花机'" @click="pushTo('电脑绣花机')">
|
||||
<ItemCard :data="xhj_data"></ItemCard>
|
||||
</BorderView>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<BorderView :title="'零等待皮革缝纫机'" @click="pushTo('床笠裙边机')">
|
||||
<BorderView :title="'零等待皮革缝纫机'" @click="pushTo('全自动缝纫机(零等待)')">
|
||||
<ItemCard :data="ldd_data"></ItemCard>
|
||||
</BorderView>
|
||||
</div>
|
||||
</div>
|
||||
@ -51,21 +52,128 @@ import { ref, reactive, onMounted, onUnmounted, getCurrentInstance, watch, onUpd
|
||||
import header2 from './components/header2.vue'
|
||||
import BorderView from './components/Border.vue'
|
||||
import ItemCard from './components/ItemCard.vue'
|
||||
import {scatteredLayoutExhibitionDevice} from '@/http/Exhibition/CIFM'
|
||||
import { connectWebsocket, closeWebsocket } from "@/utils/websocket"
|
||||
import {useRouter} from 'vue-router'
|
||||
|
||||
let router = useRouter()
|
||||
|
||||
|
||||
let mjxhj_data = reactive([
|
||||
|
||||
|
||||
let qbj_data = ref([
|
||||
{ key: '机架号', value: '102014422' },
|
||||
{ key: '设备状态', value: 2 },
|
||||
{ key: '稼动率', value: '90%' },
|
||||
{ key: '工作时长', value: '0min' },
|
||||
])
|
||||
|
||||
let hxj_data = ref([
|
||||
{ key: '机架号', value: '102014422' },
|
||||
{ key: '设备状态', value: 2 },
|
||||
{ key: '稼动率', value: '90%' },
|
||||
{ key: '工作时长', value: '0min' },
|
||||
])
|
||||
let xhj_data = ref([
|
||||
{ key: '机架号', value: '102014422' },
|
||||
{ key: '设备状态', value: 2 },
|
||||
{ key: '稼动率', value: '90%' },
|
||||
{ key: '工作时长', value: '0min' },
|
||||
])
|
||||
|
||||
let ldd_data = ref([
|
||||
{ key: '机架号', value: '102014422' },
|
||||
{ key: '设备状态', value: 2 },
|
||||
{ key: '稼动率', value: '90%' },
|
||||
{ key: '工作时长', value: '0min' },
|
||||
])
|
||||
let status_data = ref([])
|
||||
function scatteredLayoutExhibitionDeviceFun() {
|
||||
scatteredLayoutExhibitionDevice({s:'WME'}).then((res:any) => {
|
||||
if (res.code == 200) {
|
||||
let data = res.data
|
||||
let qbj = data['床笠裙边机']
|
||||
let hxj = data['电脑绗绣机']
|
||||
let xhj = data['电脑绣花机']
|
||||
let ldd = data['全自动缝纫机(零等待)']
|
||||
qbj_data.value = [
|
||||
{ key: '机架号', value: qbj['label'] },
|
||||
{ key: '设备状态', value: qbj['status'] },
|
||||
{ key: '稼动率', value: qbj['ratio'] },
|
||||
{ key: '工作时长', value: qbj['workTime'] },
|
||||
]
|
||||
|
||||
hxj_data.value = [
|
||||
{ key: '机架号', value: hxj['label'] },
|
||||
{ key: '设备状态', value: hxj['status'] },
|
||||
{ key: '稼动率', value: hxj['ratio'] },
|
||||
{ key: '工作时长', value: hxj['workTime'] },
|
||||
]
|
||||
|
||||
xhj_data.value = [
|
||||
{ key: '机架号', value: xhj['label'] },
|
||||
{ key: '设备状态', value: xhj['status'] },
|
||||
{ key: '稼动率', value: xhj['ratio'] },
|
||||
{ key: '工作时长', value: xhj['workTime'] },
|
||||
]
|
||||
|
||||
ldd_data.value = [
|
||||
{ key: '机架号', value: ldd['label'] },
|
||||
{ key: '设备状态', value: ldd['status'] },
|
||||
{ key: '稼动率', value: ldd['ratio'] },
|
||||
{ key: '工作时长', value: ldd['workTime'] },
|
||||
]
|
||||
|
||||
|
||||
status_data.value = [
|
||||
{label:qbj['label'],data:qbj_data},
|
||||
{label:hxj['label'],data:hxj_data},
|
||||
{label:xhj['label'],data:xhj_data},
|
||||
{label:ldd['label'],data:ldd_data}
|
||||
]
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function pushTo(val){
|
||||
router.push({path:`/CIFMExhibitionMain_${val}`})
|
||||
}
|
||||
|
||||
|
||||
//socket
|
||||
function getWebsocket(val) {
|
||||
try {
|
||||
let data = JSON.parse(val)
|
||||
|
||||
|
||||
if (data.type == 'WorkingState') {
|
||||
let { RackNumber, WorkingState } = data.msg
|
||||
let index = status_data.value.findIndex((item, index) => {
|
||||
return item['label'] == RackNumber
|
||||
})
|
||||
|
||||
if (index !== -1) {
|
||||
status_data.value[index].data.value[1].value = WorkingState
|
||||
}
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
|
||||
}
|
||||
function errWebsocket(val) {
|
||||
// console.log(val);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
scatteredLayoutExhibitionDeviceFun()
|
||||
|
||||
connectWebsocket(null, null, getWebsocket, errWebsocket)
|
||||
})
|
||||
onUnmounted(() => {
|
||||
closeWebsocket()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -246,7 +246,7 @@ onMounted(() => {
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer)
|
||||
|
||||
// closeWebsocket()
|
||||
closeWebsocket()
|
||||
document.getElementById('app').style.backgroundColor = '#100c2a'
|
||||
})
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user