哥伦比亚展会大屏update

src/http/Exhibition/Colombia/index.ts

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

src/views/Elevator/index.vue

@@ -47,7 +47,7 @@
 </template>
 
 <script setup lang='ts'>
-import { onMounted, onUnmounted, ref, reactive, watch, computed } from 'vue'
+import { onMounted, onUnmounted, ref, reactive, watch, computed, onActivated, onDeactivated } from 'vue'
 import Border from './components/Border.vue'
 import LeftStatus from './components/LeftStatus.vue'
 import Buttons from './components/Buttons.vue'
@@ -151,9 +151,11 @@ watch(thatstatus, (val) => {
 function elevatorUp(type) {
     if (type == 'top') {
         y_px.value = min_px
+        clearInterval(timer)
         return
     } else if (type == 'bottom') {
         y_px.value = max_px
+        clearInterval(timer)
         return
     }
     timer = setInterval(() => {
@@ -198,6 +200,8 @@ function getWebsocket(val) {
     }
 
 }
+
+
 function errWebsocket(val) {
     // console.log(val);
 }
@@ -211,6 +215,13 @@ onUnmounted(() => {
     closeWebsocket()
     document.getElementById('app').style.backgroundColor = '#100c2a'
 })
+onActivated(() => {
+    connectWebsocket(null, null, getWebsocket, errWebsocket)
+})
+onDeactivated(() => {
+    clearInterval(timer)
+    closeWebsocket()
+})
 </script>
 
 <style scoped>

src/views/Exhibition/Colombia/component/BarChart.vue

@@ -27,13 +27,6 @@ const setCharts = () => {
         //     text: '工作时间'
         // },
         backgroundColor: '#0E0E0E',
-        legend: {
-            data: ['计划完成', '实际完成'],
-            textStyle: {
-                fontSize: 14
-            },
-
-        },
         textStyle: {
             fontSize:14
 
@@ -61,7 +54,12 @@ const setCharts = () => {
                 }
             }
         ],
-        series: prop.seriesData
+        series: [
+            {
+                data: prop.seriesData,
+                type: 'bar'
+            }
+        ]
     };
 
     charts.setOption(option);

src/views/Exhibition/Colombia/index.vue

@@ -21,8 +21,8 @@
                     <div class="box">
                         <img src="./images/fzmbj.png" class="fzmbj-img" alt="">
                         <div class="devcard-container">
-                            <DevCard :dev_title="dev_title" :dev_value="dev_value">
+                            <DevCard :dev_title="dev_title" :dev_value="mubanji_value">
-                                <BarChart style="width: 100%;height: 100%;" :xData="data.xData" :seriesData="data.series">
+                                <BarChart style="width: 100%;height: 100%;" :xData="data_chart.xData" :seriesData="data_chart.mubanji_series">
                                 </BarChart>
                             </DevCard>
                         </div>
@@ -43,10 +43,20 @@
                             <div class="box-top">
                                 <div class="top-item" v-for="(item, index) in mjxhj_data">
                                     <span class="key-text">{{ item.key }}:</span>
-                                    <span class="value-text">{{ item.value }}</span>
+                                    <span class="value-text"  :class="{ status: index == 1 }"
+                            :style="{ background: index == 1 ? status_color[item.value] : '' }">{{ index ==
+                                1 ? '' : item.value }}</span>
+                                </div>
+                            </div>
+                            <div class="box-bottom">
+                                <div class="box-bottom-left">
+                                    <BarChart style="width: 100%;height: 100%;" :xData="data_chart.xData" :seriesData="data_chart.xiuhuaji_series">
+                                </BarChart>
+                                </div>
+                                <div class="box-bottom-right">
+                                    <img src="./images/mjxhj.png" alt="">
                                 </div>
                             </div>
-
                         </div>
                     </BorderVue>
                 </div>
@@ -56,8 +66,8 @@
                     <div class="box">
                         <img src="./images/hty.png" class="fzmbj-img" alt="">
                         <div class="devcard-container">
-                            <DevCard :dev_title="dev_title" :dev_value="dev_value">
+                            <DevCard :dev_title="dev_title" :dev_value="huituyi_value">
-                                <BarChart style="width: 100%;height: 100%;" :xData="data.xData" :seriesData="data.series">
+                                <BarChart style="width: 100%;height: 100%;" :xData="data_chart.xData" :seriesData="data_chart.huituyi_series">
                                 </BarChart>
                             </DevCard>
                         </div>
@@ -78,49 +88,75 @@ import BarChart from './component/BarChart.vue'
 
 import { getmDeviceList, getmDeviceProduction } from '@/http/MicroExhibition'
 import { ref, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated, computed, reactive } from 'vue'
-import { useMicroExhibitionStore } from '@/store/module/MicroExhibition'
+
+import {columbiaDeviceList,columbiaDeviceProduction} from '@/http/Exhibition/Colombia'
 import { connectWebsocket, closeWebsocket } from "@/utils/websocket"
 
 import { useI18n } from 'vue-i18n'
 let { t } = useI18n();
-const store = useMicroExhibitionStore()
 
 let videoUrl = ref('https://d.tufting222.cn/video/yzy/a.mp4')
 const videoElement = ref(null)
 let timer = null
 
 let dev_title = ref(['机架号', '设备状态', '稼 动 率', '工作时长'])
-let dev_value = ref([
+let mubanji_value = ref([
     [102014422, '0', '40层', '0min']
 ])
-let mjxhj_data = ref([
+let huituyi_value = ref([
+    [102014422, '0', '40层', '0min']
+])
+let mjxhj_data = reactive([
     { key: '机 架 号', value: '102014422' },
     { key: '设备状态', value: 2 },
     { key: '稼 动 率', value: '40层' },
     { key: '工作时长', value: '0min' },
 ])
-let data = reactive({ series: [], xData: [] })
+const status_color = {
-setTimeout(() => {
+    '0': '#FF6E76',
-    data.series = [
+    '1': '#FDDD60',
-        {
+    '2': '#7CFFB2',
-            "type": "bar",
+    '3': '#FDDD60',
-            "data": [
-                100,
-            ],
-            "name": "计划完成"
-        },
-        {
-            "type": "bar",
-            "data": [
-                0,
-            ],
-            "name": "实际完成"
 }
+async function getcolumbiaDeviceList() {
+    const result:any = await columbiaDeviceList();
+    if (result.code == 200) {
+        let {data} = result;
+        let mubanji = data['服装模板机']
+        let huituyi = data['绘图仪(一代)']
+        let xiuhuaji = data['单头混合毛巾绣花机']
+        mubanji_value.value = [
+            [mubanji.label,mubanji.status,mubanji.ratio,mubanji.workTime]
         ]
-    data.xData = [
+        huituyi_value.value = [
-        "振镜激光裁床",
+            [huituyi.label,huituyi.status,huituyi.ratio,huituyi.workTime]
         ]
+
+        mjxhj_data[0].value = xiuhuaji.label
+        mjxhj_data[1].value = xiuhuaji.status
+        mjxhj_data[2].value = xiuhuaji.ratio
+        mjxhj_data[3].value = xiuhuaji.workTime
+
+    }
+}
+
+
+let data_chart = reactive({ mubanji_series: [], xiuhuaji_series: [], huituyi_series: [], xData: ["计划产量","实际产量"] })
+
+function getcolumbiaDeviceProduction() {
+    columbiaDeviceProduction().then((result:any) => {
+        
+        if (result.code == 200) {
+            let {data} = result;
+            console.log(data,'-----');
+            
+            data_chart.mubanji_series = data.mubanji
+            data_chart.xiuhuaji_series = data.xiuhuaji
+            data_chart.huituyi_series = data.huituyi
+        }
     })
+}
+
 
 
 
@@ -150,21 +186,8 @@ function errWebsocket(val) {
 
 
 onMounted(() => {
-
+    getcolumbiaDeviceList()
-
+    getcolumbiaDeviceProduction()
-
-
-
-    // setInterval(() => {
-    //     let status = Math.round(Math.random() * 3)
-    //     let val = {
-    //         step: '后整设备',
-    //         num: 24,
-    //         status: status
-    //     }
-
-    //     changestatus(val)
-    // }, 5000)
     connectWebsocket(null, null, getWebsocket, errWebsocket)
     document.getElementById('app').style.backgroundColor = 'rgba(0, 11, 18, 1)'
 })
@@ -275,14 +298,28 @@ onUnmounted(() => {
     width: 100%;
     height: 70%;
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
 }
+.box-bottom-left {
+    width: 250px;
+    height: 100%;
+}
+.box-bottom-right {
+    flex: 1;
+    height: 100%;
+}
+
+.box-bottom-right img {
+    max-width: 100%;
+}
+
+
 .top-item {
     width: 33%;
     height: 50%;
     display: flex;
-    justify-content: space-between;
+    justify-content: space-around;
     align-items: center;
     box-sizing: border-box;
     padding: 0 20px;
@@ -299,8 +336,13 @@ onUnmounted(() => {
     font-size: 24px;
     color: #AEEEFAFE;
     font-family: '华文新魏', sans-serif;
-    text-align: left;
     box-sizing: border-box;
     padding-left: 10px;
 }
+
+.status {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+}
 </style>