微工厂大屏更新，接口联调

src/http/MicroExhibition/index.ts

@@ -0,0 +1,12 @@
+import {get,post} from "@/utils/http"
+
+//获取设备在线状态、设备列表
+export function getmDeviceList(){
+    return get('/screen/device/mDeviceList')
+}
+
+
+//获取设备在线状态、设备列表
+export function getmDeviceProduction(){
+    return get('/screen/device/mDeviceProduction')
+}

src/utils/httpEmpty.ts

@@ -0,0 +1,108 @@
+// http.ts
+import axios, { AxiosRequestConfig, AxiosResponse } from 'axios'
+let url = ''
+
+// 3.创建自定义axios  限制响应时间
+axios.create({
+
+    // baseURL: url,
+    timeout: 3000,
+})
+
+
+//请求拦截器
+axios.interceptors.request.use((config: AxiosRequestConfig | any) => {
+    return config;
+}, function (error) {
+    // 对请求错误做些什么
+    return Promise.reject(error);
+});
+
+//响应拦截器
+axios.interceptors.response.use(function (response: AxiosResponse) {
+
+    let status = response.status;
+    return response;
+}, function (error) {
+    // 对响应错误做点什么
+    return Promise.reject(error);
+});
+
+
+export function get(staurl: string, data: any = '') {
+
+    let _url = url + staurl //"?" + strData;
+
+    return new Promise((resolve, rejects) => {
+        let header = { //请求头设置
+            "Access-Control-Allow-Origin": "*"
+        }
+        axios({
+            url: _url,//在线跨域请求
+            method: "get",//默认是get请求
+            headers: header,
+            params: data
+        }).then(function (val) {
+            // console.log(val) // axios会对我们请求来的结果进行再一次的封装（ 让安全性提高 ）
+            resolve(val.data)
+        }).catch(function (err) {
+            // console.log(err)
+            rejects(err)
+        })
+
+    })
+}
+
+
+export function put(staurl: string, data: any = '') {
+
+    let _url = url + staurl //"?" + strData;
+
+    return new Promise((resolve, rejects) => {
+        let header = { //请求头设置
+            "Access-Control-Allow-Origin": "*"
+        }
+        axios({
+            url: _url,//在线跨域请求
+            method: "put",//默认是get请求
+            headers: header,
+            params: data
+        }).then(function (val) {
+            // console.log(val) // axios会对我们请求来的结果进行再一次的封装（ 让安全性提高 ）
+            resolve(val.data)
+        }).catch(function (err) {
+            // console.log(err)
+            rejects(err)
+        })
+
+    })
+}
+
+
+export function post(staurl: string, data: any = "", method: string = "POST") {
+
+    // strData = 'code=' + code + '&sign=' + strSign + '&para=' + tmpPara;
+    // console.log(strData);
+    let _url = url + staurl //+ "?" + strData;
+    let METHOD = method || "POST"
+    return new Promise((resolve, rejects) => {
+        let params: any = {}
+        // 处理表单结果中文件的操作
+
+        axios({
+            url: _url,
+            method: METHOD,
+            data: data
+        }).then(function (res) {
+            // console.log(val) // axios会对我们请求来的结果进行再一次的封装（ 让安全性提高 ）
+            resolve(res.data)
+        }).catch(function (err) {
+            // console.log(err)
+            rejects(err)
+        })
+
+
+    })
+}
+
+

src/views/MicroExhibition/component/BarChart.vue

@@ -0,0 +1,100 @@
+<template>
+    <div ref="LChartRef" class="cc"></div>
+</template>
+
+<script setup lang='ts'>
+import { ref, getCurrentInstance, onMounted, watch } from 'vue'
+
+
+const prop = defineProps({
+    xData: {
+        type: Array,
+        default: ['1050910', '1050269']
+    },
+    seriesData: {
+        type: Array,
+        default: []
+    }
+})
+
+let LChartRef = ref(null);
+const { proxy } = getCurrentInstance() as any;
+let charts = null;
+const setCharts = () => {
+    charts = proxy.$echarts.init(LChartRef.value, 'dark')
+    let option = {
+        // title: {
+        //     text: '工作时间'
+        // },
+        backgroundColor: '#0E0E0E',
+        legend: {
+            data: ['计划产量', '实际产量'],
+            textStyle: {
+                fontSize: 14
+            },
+
+        },
+        textStyle: {
+            fontSize:14
+
+        },
+        grid:{
+            left:'80',
+            right:'10',
+            bottom:'40',
+        },
+        color:['#2FC5D4','#FEDA81'],
+        xAxis: {
+            type: 'category',
+            data: prop.xData,
+            // axisLabel: {
+            //     interval: 0, //控制X轴刻度全部显示
+            //     rotate: 45, //倾斜角度
+            // },
+        },
+        yAxis: [
+            {
+                type: 'value',
+                name: '日产量',
+                axisLabel:{
+                    fontSize:14
+                }
+            }
+        ],
+        series: prop.seriesData
+    };
+
+    
+    charts.setOption(option);
+}
+
+watch(() => prop.seriesData, (newVal, oldVal) => {
+    charts.setOption({
+        series: newVal
+    });
+    
+}, { deep: true })
+watch(() => prop.xData, (newVal, oldVal) => {
+    charts.setOption({
+
+        xAxis: {
+            type: 'category',
+            data: prop.xData,
+            // axisLabel: {
+            //     interval: 0, //控制X轴刻度全部显示
+            //     rotate: 45, //倾斜角度
+            // },
+        },
+    });
+}, { deep: true })
+onMounted(() => {
+    setCharts()
+})
+</script>
+
+<style scoped>
+.cc {
+    width: 100%;
+    height: 100%;
+}
+</style>

src/views/MicroExhibition/component/Border.vue

@@ -37,6 +37,7 @@ let prop = defineProps({
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    align-items: center;
     background: url(./../images/border.png) no-repeat;
     background-size: 100% 100%;
 }
@@ -77,6 +78,8 @@ let prop = defineProps({
 }
 
 .newboder-content {
+    width: 100%;
+    height: 84%;
     flex: 1;
 }
 </style>

src/views/MicroExhibition/component/BottomBorder.vue

@@ -12,22 +12,32 @@
     <div class="rbottom-container">
         <div class="rbottom-title">后整设备</div>
         <div class="rbottom-content">
-            <div class="rbottom-bg" v-for="i in 5">
+            <div class="rbottom-bg" v-for="i in (prop.data as any)">
-                <div class="dev-name">自动烫裤机</div>
+                <div class="dev-name">{{ i.name }}</div>
                 <div class="dev-progress">
                     <div class="ele-progress">
-                        <el-progress :percentage="50" :show-text="false" :stroke-width="13">
+                        <el-progress :percentage="i.rationum" :show-text="false" :stroke-width="13">
-                    </el-progress>
+                        </el-progress>
                     </div>
 
-                    <div>50%</div>
+                    <div>{{ i.ratio }}</div>
                 </div>
                 <div class="dev-status">
-                    <div class="status1">编号：2</div>
+                    <div class="status1">编号：{{ i.num }}</div>
-                    <div class="status2">状态：运行</div>
+                    <div class="status2">状态：
+                        <div style="width: 50%;height: 100%;display: flex;justify-content: center;align-items: center;">
+                            <div
+                                style="width:24px;height:24px;border-radius: 50%;"
+                                :style="{
+                                    backgroundColor: status_color[i.status]
+                                }"
+                                >
+                            </div>
+                        </div>
+                    </div>
                 </div>
                 <div class="dev-status">
-                    工作时长：2小时
+                    工作时长：{{ i.workTime }}
                 </div>
             </div>
         </div>
@@ -35,6 +45,22 @@
 </template>
 
 <script setup lang='ts'>
+import {computed } from 'vue'
+
+
+const prop = defineProps({
+    data: {
+        type: Array ,
+        default: []
+    }
+})
+
+const status_color = {
+    '0': '#FF6E76',
+    '1': '#FDDD60',
+    '2': '#7CFFB2',
+    '3': '#FDDD60',
+}
 </script>
 
 <style scoped>
@@ -85,6 +111,7 @@
     font-weight: 700;
     font-size: 18px;
 }
+
 .dev-name {
     width: 100%;
     height: 25%;
@@ -93,6 +120,7 @@
     justify-content: center;
     align-items: center;
 }
+
 .dev-progress {
     width: 100%;
     height: 25%;
@@ -101,6 +129,7 @@
     justify-content: space-around;
     align-items: center;
 }
+
 .ele-progress {
     width: 80% !important;
 }
@@ -114,6 +143,7 @@
     justify-content: space-between;
     align-items: center;
 }
+
 .status1 {
     height: 100%;
     width: 50%;
@@ -121,11 +151,11 @@
     justify-content: flex-start;
     align-items: center;
 }
+
 .status2 {
     height: 100%;
     width: 50%;
     display: flex;
     justify-content: flex-end;
     align-items: center;
-}
+}</style>
-</style>

src/views/MicroExhibition/component/ScrollBoard.vue

@@ -40,7 +40,13 @@ const handleData = () => {
     let updateList =  prop.data.list.map((items: any) => {
         return items.map((item: any, index: number) => {
             if (index == (items.length - 3)) {
-                return statusHtml(status_color[item])
+                let temp = item
+                if (item == "true") {
+                    temp = '2'
+                } else if (item == "false") {
+                    temp = '0'
+                }
+                return statusHtml(status_color[temp])
             }
             return item
         })

src/views/MicroExhibition/component/StepItem.vue

@@ -13,7 +13,7 @@
     <div class="step-top">{{ prop.data.name }}</div>
     <div class="step-bottom">
         <div class="step-total">总数：{{ prop.data.total }}台</div>
-        <div class="step-online">在线：{{ prop.data.total }}台</div>
+        <div class="step-online">在线：{{ prop.data.online }}台</div>
     </div>
   </div>
 </template>

src/views/MicroExhibition/index.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: hzz hzz
- * @Date: 2023-12-05 13:30:45
+ * @Date: 2023-12-06 15:21:39
  * @LastEditors: hzz hzz
- * @LastEditTime: 2023-12-06 15:17:05
+ * @LastEditTime: 2023-12-06 16:40:32
  * @FilePath: \screenFront\src\views\MicroExhibition\index.vue
  * @Description: 
  * 
@@ -18,7 +18,15 @@
         <div class="content">
             <div class="left">
                 <div class="ltop">
-                    <BoardVue :title="'裁剪设备'"></BoardVue>
+                    <BoardVue :title="'裁剪设备'" class="ltborder">
+
+                        <div class="lttop">
+                            <ScrollBoard :data="cjdata"></ScrollBoard>
+                        </div>
+                        <div class="ltbottom">
+                            <BarChart :xData="xData" style="width: 100%;height: 100%;" :seriesData="seriesData"></BarChart>
+                        </div>
+                    </BoardVue>
                 </div>
                 <div class="lbottom">
                     <BoardVue :title="'缝前设备'">
@@ -30,16 +38,12 @@
                 <div class="rtop">
                     <div class="rtleft">
                         <div class="rtltop">
-                            <StepItem v-for="i in 4"></StepItem>
+                            <StepItem v-for="i in stepList" :data="i"></StepItem>
                         </div>
                         <div class="rtlbottom">
-                            <video controls loop autoplay="true" width="777">
+                            <video controls loop autoplay="true" ref="videoElement" width="777">
-                                <source src="https://tjgoa.oss-cn-beijing.aliyuncs.com/20230914%E5%BE%AE%E5%B7%A5%E5%8E%82%E5%AE%A3%E4%BC%A0%E8%A7%86%E9%A2%91%E4%BA%8E%E6%89%BF%E5%BF%97.mp4"
+                                <source :src="videoUrl" type="video/mp4" />
-                                    type="video/mp4" />
                             </video>
-                            <!-- <video class="video"
-                                src="https://tjgoa.oss-cn-beijing.aliyuncs.com/20230914%E5%BE%AE%E5%B7%A5%E5%8E%82%E5%AE%A3%E4%BC%A0%E8%A7%86%E9%A2%91%E4%BA%8E%E6%89%BF%E5%BF%97.mp4"
-                                autoplay></video> -->
                         </div>
                     </div>
                     <div class="rtright">
@@ -49,7 +53,7 @@
                     </div>
                 </div>
                 <div class="rbottom">
-                    <BottomBorder></BottomBorder>
+                    <BottomBorder :data="hzdata"></BottomBorder>
                 </div>
             </div>
         </div>
@@ -63,7 +67,9 @@ import BoardVue from './component/Border.vue'
 import StepItem from './component/StepItem.vue'
 import BottomBorder from './component/BottomBorder.vue'
 import ScrollBoard from './component/ScrollBoard.vue'
+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 { connectWebsocket, closeWebsocket } from "@/utils/websocket"
@@ -71,6 +77,11 @@ import { connectWebsocket, closeWebsocket } from "@/utils/websocket"
 import { useI18n } from 'vue-i18n'
 let { t } = useI18n();
 const store = useMicroExhibitionStore()
+
+let videoUrl = ref('http://tjgoa.oss-cn-beijing.aliyuncs.com/202309141%E5%BE%AE%E5%B7%A5%E5%8E%82%E5%AE%A3%E4%BC%A0%E8%A7%86%E9%A2%91%E4%BA%8E%E6%89%BF%E5%BF%97.mp4')
+const videoElement = ref(null)
+
+
 let fqdata = ref({
     list: [],
     rowNum: 3,
@@ -79,19 +90,156 @@ let fzdata = ref({
     list: [],
     rowNum: 10,
 })
-let listdata = reactive([])
+let cjdata = ref({
+    list: [],
+    rowNum: 4,
+})
+
+let stepList = reactive([
+    {
+        name: '裁剪',
+        total: 0,
+        online: 0,
+    },
+    {
+        name: '缝前',
+        total: 0,
+        online: 0,
+    },
+    {
+        name: '缝中',
+        total: 0,
+        online: 0,
+    },
+    {
+        name: '后整',
+        total: 0,
+        online: 0,
+    },
+])
+let hzdata = ref([])
+let xData = ref(["1171902",
+    "10201557",
+    "1171701",
+    "1170304"])
+let seriesData = ref([
+    {
+        type: 'bar',
+        "data": [80, 100, 80, 80],
+        "name": "计划产量"
+    },
+    {
+        type: 'bar',
+        "data": [0, 444, 14, 1912],
+        "name": "实际产量"
+    }
+])
 let list = [
     [1, '自动缝纫机', 29, 1, '95%', '12min'],
     [1, '自动缝纫机', 29, 1, '95%', '12min'],
     [1, '自动缝纫机', 29, 1, '95%', '12min'],
     [1, '自动缝纫机', 29, 1, '95%', '12min'],
     [1, '自动缝纫机', 29, 1, '95%', '12min'],]
-setTimeout(() => {
-    fqdata.value.list.push(...list)
-    fzdata.value.list.push(...[...list, ...list, ...list])
-}, 1000);
 
 
+function getmDevList() {
+    getmDeviceList().then((res: any) => {
+        if (res.code == 200) {
+            let data = res.data
+            console.log(data, 'data');
+            for (let key in data) {
+                const devObj = {
+                    '裁剪设备':cjdata.value,
+                    '缝前设备':fqdata.value,
+                    '缝中设备':fzdata.value,
+                }
+                const statusObj = {
+                    '裁剪设备':0,
+                    '缝前设备':1,
+                    '缝中设备':2,
+                }
+                if (devObj.hasOwnProperty(key)) {
+                    let online = 0;
+                    devObj[key].list = data[key].map((item: any, i: number) => {
+                        if (item.status == 'true' || item.status == '2') {
+                            online++
+                        }
+                        let temp = item.status
+                        if (item.status == "true") {
+                            temp = '2'
+                        } else if (item.status == "false") {
+                            temp = '0'
+                        }
+                        return [i + 1, item.name, item.num, temp, item.ratio, item.workTime]
+                    })
+                    stepList[statusObj[key]].online = online;
+                    stepList[statusObj[key]].total = devObj[key].list.length;
+                }
+                // if (key == '裁剪设备') {
+                //     let online = 0;
+                //     cjdata.value.list = data[key].map((item: any, i: number) => {
+                //         if (item.status == 'true' || item.status == '2') {
+                //             online++
+                //         }
+                //         return [i + 1, item.name, item.num, item.status, item.ratio, item.workTime]
+                //     })
+                //     stepList[0].online = online;
+                //     stepList[0].total = cjdata.value.list.length;
+                // }
+                // if (key == '缝前设备') {
+                //     let online = 0;
+                //     fqdata.value.list = data[key].map((item: any, i: number) => {
+                //         if (item.status == 'true' || item.status == '2') {
+                //             online++
+                //         }
+                //         return [i + 1, item.name, item.num, item.status, item.ratio, item.workTime]
+                //     })
+                //     stepList[1].online = online;
+                //     stepList[1].total = fqdata.value.list.length;
+
+                // }
+                // if (key == '缝中设备') {
+                //     let online = 0;
+                //     fzdata.value.list = data[key].map((item: any, i: number) => {
+                //         if (item.status == 'true' || item.status == '2') {
+                //             online++
+                //         }
+                //         return [i + 1, item.name, item.num, item.status, item.ratio, item.workTime]
+                //     })
+                //     stepList[2].online = online;
+                //     stepList[2].total = fzdata.value.list.length;
+                // }
+                if (key == '后整设备') {
+                    let online = 0;
+                    hzdata.value = data[key].map((item: any, i: number) => {
+                        if (item.status == 'true' || item.status == '2') {
+                            online++
+                        }
+                        let temp = item.status
+                        if (item.status == "true") {
+                            temp = '2'
+                        } else if (item.status == "false") {
+                            temp = '0'
+                        }
+                        return {
+                            name: item.name,
+                            num: item.num,
+                            status: temp,
+                            ratio: item.ratio,
+                            rationum: parseInt(item.ratio.split('%')[0]),
+                            workTime: item.workTime,
+                        }
+                    })
+                    console.log(hzdata.value, 'hzdata.value');
+                    
+                    stepList[3].online = online;
+                    stepList[3].total = hzdata.value.length;
+                }
+            }
+        }
+    })
+}
+
 
 
 function getWebsocket(val) {
@@ -115,7 +263,46 @@ function errWebsocket(val) {
     // console.log(val);
 }
 
+
+// function videoToBase64(file) {
+//     return new Promise((resolve, reject) => {
+//         let reader:any = new FileReader();
+//         reader.readAsDataURL(file);
+//         reader.onload = () => {
+//             let base64 = reader.result.split(',')[1];
+//             resolve(base64);
+//         };
+//         reader.onerror = error => reject(error);
+//     });
+// }
+
+// async function loadeddataFun() {  
+//     if (localStorage.getItem('videoUrl')) {
+//         return
+//     }
+
+//     const response:any = await fetch(videoWebUrl);
+//     const blob = await response.blob();
+//     const fileReader:any = new FileReader();
+//     console.log(response,'21313');
+
+//     fileReader.readAsDataURL(response);
+//     fileReader.onloadend = function () {
+//         const file = new File([fileReader.result], 'video.mp4', { type: 'video/mp4' });
+//         videoUrl.value = URL.createObjectURL(file);
+//         let base64 = fileReader.result.split(',')[1];
+
+//         localStorage.setItem('videoUrl', base64 )
+//     };
+//     fileReader.readAsArrayBuffer(blob);
+
+
+// }
+
+
 onMounted(() => {
+
+    getmDevList()
     connectWebsocket(null, null, getWebsocket, errWebsocket)
     document.getElementById('app').style.backgroundColor = 'rgba(0, 11, 18, 1)'
 })
@@ -167,6 +354,28 @@ onUnmounted(() => {
     height: 630px;
 }
 
+.ltborder {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.lttop {
+    width: 100%;
+    height: 240px;
+}
+
+.ltbottom {
+    flex: 1;
+    width: 100%;
+    height: 270px;
+}
+
+
+
 .lbottom {
     width: 100%;
     height: 335px;