From c8e298536ac1548f81a6cca42fd329820642d0e2 Mon Sep 17 00:00:00 2001
From: hzz <hzz>
Date: Tue, 26 Dec 2023 17:04:54 +0800
Subject: [PATCH] =?UTF-8?q?=E5=93=A5=E4=BC=A6=E6=AF=94=E4=BA=9A=E5=B1=95?=
 =?UTF-8?q?=E4=BC=9A=E5=A4=A7=E5=B1=8Fupdate?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/http/Exhibition/Colombia/index.ts         |  12 ++
 src/views/Elevator/index.vue                  |  23 ++-
 .../Colombia/component/BarChart.vue           |  14 +-
 src/views/Exhibition/Colombia/index.vue       | 140 ++++++++++++------
 4 files changed, 126 insertions(+), 63 deletions(-)
 create mode 100644 src/http/Exhibition/Colombia/index.ts

diff --git a/src/http/Exhibition/Colombia/index.ts b/src/http/Exhibition/Colombia/index.ts
new file mode 100644
index 0000000..9827361
--- /dev/null
+++ b/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')
+}
\ No newline at end of file
diff --git a/src/views/Elevator/index.vue b/src/views/Elevator/index.vue
index 91b2e86..f90b8fa 100644
--- a/src/views/Elevator/index.vue
+++ b/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'
@@ -57,13 +57,13 @@ let { timeHtml } = useNowTime();
 
 let timer = null;
 let thatstatus = computed(() => {
-    if (second_data.value.IN3||first_data.value.IN3||second_data.value.IN4||first_data.value.IN4) {
+    if (second_data.value.IN3 || first_data.value.IN3 || second_data.value.IN4 || first_data.value.IN4) {
         clearInterval(timer)
         return ''
     }
-    if (second_data.value.IN7||first_data.value.IN7) {
+    if (second_data.value.IN7 || first_data.value.IN7) {
         return 'up'
-    } else if (second_data.value.IN8||first_data.value.IN8) {
+    } else if (second_data.value.IN8 || first_data.value.IN8) {
         return 'down'
     } else if (second_data.value.IN6) {
         return 'top'
@@ -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(() => {
@@ -180,10 +182,10 @@ function getWebsocket(val) {
         if (data.type == 'liftInfo') {
             let msg = data.msg
             if (msg.name == 'first') {
-                if (msg.IN7 == 1&&second_data.value.IN1 == 0) {
+                if (msg.IN7 == 1 && second_data.value.IN1 == 0) {
                     msg.IN1 = 1
                 }
-                if (msg.IN8 == 1&&second_data.value.IN2 == 0) {
+                if (msg.IN8 == 1 && second_data.value.IN2 == 0) {
                     msg.IN2 = 1
                 }
                 first_data.value = msg
@@ -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>
diff --git a/src/views/Exhibition/Colombia/component/BarChart.vue b/src/views/Exhibition/Colombia/component/BarChart.vue
index 311c10d..b753733 100644
--- a/src/views/Exhibition/Colombia/component/BarChart.vue
+++ b/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);
diff --git a/src/views/Exhibition/Colombia/index.vue b/src/views/Exhibition/Colombia/index.vue
index 4f20c0a..0ac8331 100644
--- a/src/views/Exhibition/Colombia/index.vue
+++ b/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">
-                                <BarChart style="width: 100%;height: 100%;" :xData="data.xData" :seriesData="data.series">
+                            <DevCard :dev_title="dev_title" :dev_value="mubanji_value">
+                                <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">
-                                <BarChart style="width: 100%;height: 100%;" :xData="data.xData" :seriesData="data.series">
+                            <DevCard :dev_title="dev_title" :dev_value="huituyi_value">
+                                <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: [] })
-setTimeout(() => {
-    data.series = [
-        {
-            "type": "bar",
-            "data": [
-                100,
-            ],
-            "name": "计划完成"
-        },
-        {
-            "type": "bar",
-            "data": [
-                0,
-            ],
-            "name": "实际完成"
+const status_color = {
+    '0': '#FF6E76',
+    '1': '#FDDD60',
+    '2': '#7CFFB2',
+    '3': '#FDDD60',
+}
+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]
+        ]
+        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
         }
-    ]
-    data.xData = [
-        "振镜激光裁床",
-    ]
-})
+    })
+}
+
 
 
 
@@ -150,21 +186,8 @@ function errWebsocket(val) {
 
 
 onMounted(() => {
-
-
-
-
-
-    // setInterval(() => {
-    //     let status = Math.round(Math.random() * 3)
-    //     let val = {
-    //         step: '后整设备',
-    //         num: 24,
-    //         status: status
-    //     }
-
-    //     changestatus(val)
-    // }, 5000)
+    getcolumbiaDeviceList()
+    getcolumbiaDeviceProduction()
     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>