广州木机展大屏更新

src/http/Exhibition/CIFM/index.ts

@@ -0,0 +1,7 @@
+import {get,post} from "@/utils/http"
+
+//获取设备在线状态、设备列表
+export function scatteredLayoutExhibitionDevice(data){
+    return get('/screen/cisma/scatteredLayoutExhibitionDevice',data)
+}
+

src/router/index.ts

@@ -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"),
       },

src/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>

src/views/Exhibition/CIFM/components/ItemCard.vue

@@ -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;

src/views/Exhibition/CIFM/main.vue

@@ -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('床笠裙边机')">
+                    <BorderView :title="'电脑绗绣机'" @click="pushTo('电脑绗绣机')">
-                    <ItemCard :mjxhj_data="mjxhj_data"></ItemCard>
+                    <ItemCard :data="hxj_data"></ItemCard>
                     </BorderView>
                 </div>
                 <div class="cb">
-                    <BorderView :title="'电脑绣花机'" @click="pushTo('床笠裙边机')">
+                    <BorderView :title="'电脑绣花机'" @click="pushTo('电脑绣花机')">
-                    <ItemCard :mjxhj_data="mjxhj_data"></ItemCard>
+                    <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>

src/views/Exhibition/SCISMA/index.vue

@@ -246,7 +246,7 @@ onMounted(() => {
 onUnmounted(() => {
     clearInterval(timer)
 
-    // closeWebsocket()
+    closeWebsocket()
     document.getElementById('app').style.backgroundColor = '#100c2a'
 })
 </script>