广州木机展大屏更新

src/http/Exhibition/CIFM/index.ts

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

src/views/Exhibition/CIFM/child.vue

@@ -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(() => {

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

@@ -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, 280, 140, 140, 110,85];
-let columnWidth = [90, 295, 145, 110, 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],
+    columnWidth: [80, 280, 130, 125, 110,85],
-    align: ['center', 'center', 'center', 'center', 'center', 'center'],
+    align: ['center', 'left', 'center', 'center', 'center', 'center'],
     rowNum: prop.rowNum,
     waitTime: 3000,
 })

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

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

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

@@ -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 }"
+                <span class="value-text" :style="item?.value_style">
-                    :style="{ background: index == 1 ? status_color[item.value] : '' }">{{ index ==
+                    <div class="status" v-if="index == 1" :style="{background: status_color[item.value]}"></div>
-                1 ? '' : item.value }}</span>
+                    <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 {

src/views/Exhibition/CIFM/index.ts

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

src/views/Exhibition/CIFM/index.vue

@@ -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: [],

src/views/Exhibition/CIFM/main.vue

@@ -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([