From b82917ebb49f90ca4569fe47b8afd66cd1c8ab93 Mon Sep 17 00:00:00 2001 From: hzz Date: Thu, 7 Dec 2023 16:49:09 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E5=BE=AE=E5=B7=A5=E5=8E=82=E5=A4=A7?= =?UTF-8?q?=E5=B1=8F=E6=9B=B4=E6=96=B0=EF=BC=8C=E6=8E=A5=E5=8F=A3=E8=81=94?= =?UTF-8?q?=E8=B0=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/http/MicroExhibition/index.ts | 12 + src/utils/httpEmpty.ts | 108 ++++++++ .../MicroExhibition/component/BarChart.vue | 100 ++++++++ .../MicroExhibition/component/Border.vue | 3 + .../component/BottomBorder.vue | 54 +++- .../MicroExhibition/component/ScrollBoard.vue | 8 +- .../MicroExhibition/component/StepItem.vue | 2 +- src/views/MicroExhibition/index.vue | 241 ++++++++++++++++-- 8 files changed, 498 insertions(+), 30 deletions(-) create mode 100644 src/http/MicroExhibition/index.ts create mode 100644 src/utils/httpEmpty.ts create mode 100644 src/views/MicroExhibition/component/BarChart.vue diff --git a/src/http/MicroExhibition/index.ts b/src/http/MicroExhibition/index.ts new file mode 100644 index 0000000..8a57524 --- /dev/null +++ b/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') +} \ No newline at end of file diff --git a/src/utils/httpEmpty.ts b/src/utils/httpEmpty.ts new file mode 100644 index 0000000..c358697 --- /dev/null +++ b/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 + '¶=' + 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) + }) + + + }) +} + + diff --git a/src/views/MicroExhibition/component/BarChart.vue b/src/views/MicroExhibition/component/BarChart.vue new file mode 100644 index 0000000..47374b6 --- /dev/null +++ b/src/views/MicroExhibition/component/BarChart.vue @@ -0,0 +1,100 @@ + + + + + diff --git a/src/views/MicroExhibition/component/Border.vue b/src/views/MicroExhibition/component/Border.vue index 85a89d6..9bafdf3 100644 --- a/src/views/MicroExhibition/component/Border.vue +++ b/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; } diff --git a/src/views/MicroExhibition/component/BottomBorder.vue b/src/views/MicroExhibition/component/BottomBorder.vue index 8935dde..2b9e010 100644 --- a/src/views/MicroExhibition/component/BottomBorder.vue +++ b/src/views/MicroExhibition/component/BottomBorder.vue @@ -12,22 +12,32 @@
后整设备
-
-
自动烫裤机
+
+
{{ i.name }}
- - + +
- -
50%
+ +
{{ i.ratio }}
-
编号：2
-
状态：运行
+
编号：{{ i.num }}
+
状态： +
+
+
+
+
- 工作时长：2小时 + 工作时长：{{ i.workTime }}
@@ -35,6 +45,22 @@ +} diff --git a/src/views/MicroExhibition/component/ScrollBoard.vue b/src/views/MicroExhibition/component/ScrollBoard.vue index 1c02cf5..7f5b2d4 100644 --- a/src/views/MicroExhibition/component/ScrollBoard.vue +++ b/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 }) diff --git a/src/views/MicroExhibition/component/StepItem.vue b/src/views/MicroExhibition/component/StepItem.vue index 8101ebf..0fd1f7b 100644 --- a/src/views/MicroExhibition/component/StepItem.vue +++ b/src/views/MicroExhibition/component/StepItem.vue @@ -13,7 +13,7 @@
{{ prop.data.name }}
总数：{{ prop.data.total }}台
-
在线：{{ prop.data.total }}台
+
在线：{{ prop.data.online }}台
diff --git a/src/views/MicroExhibition/index.vue b/src/views/MicroExhibition/index.vue index ceb007c..35b157a 100644 --- a/src/views/MicroExhibition/index.vue +++ b/src/views/MicroExhibition/index.vue @@ -1,8 +1,8 @@
@@ -49,7 +53,7 @@
- +
@@ -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; From f444cb2e1536986ac5055bccbb11a7a83b91fdae Mon Sep 17 00:00:00 2001 From: hzz Date: Thu, 7 Dec 2023 16:58:49 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E6=B7=BB=E5=8A=A0echarts=E6=8E=A5=E5=8F=A3?= =?UTF-8?q?=E8=81=94=E8=B0=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/MicroExhibition/index.vue | 36 +++++++++++++++++------------ 1 file changed, 21 insertions(+), 15 deletions(-) diff --git a/src/views/MicroExhibition/index.vue b/src/views/MicroExhibition/index.vue index 35b157a..55d8156 100644 --- a/src/views/MicroExhibition/index.vue +++ b/src/views/MicroExhibition/index.vue @@ -118,21 +118,8 @@ let stepList = reactive([ }, ]) let hzdata = ref([]) -let xData = ref(["1171902", - "10201557", - "1171701", - "1170304"]) +let xData = ref([]) 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'], @@ -141,7 +128,26 @@ let list = [ [1, '自动缝纫机', 29, 1, '95%', '12min'], [1, '自动缝纫机', 29, 1, '95%', '12min'],] + //获取echarts数据 +function getDeviceProduction() { + getmDeviceProduction().then((res: any) => { + if (res.code == 200) { + let data = res.data + console.log(data.series, 'data.series'); + + seriesData.value = data.series.map(item=>{ + return { + name: item.name == '计划完成' ? '计划产量' : '实际产量', + type: 'bar', + data: item.data + } + }) + xData.value = data.xData + } + }) +} +//获取设备列表 function getmDevList() { getmDeviceList().then((res: any) => { if (res.code == 200) { @@ -301,7 +307,7 @@ function errWebsocket(val) { onMounted(() => { - + getDeviceProduction() getmDevList() connectWebsocket(null, null, getWebsocket, errWebsocket) document.getElementById('app').style.backgroundColor = 'rgba(0, 11, 18, 1)' From 79f03dfa40fe9f47c6f5d35190ca676464b0b8b3 Mon Sep 17 00:00:00 2001 From: hzz Date: Wed, 13 Dec 2023 15:33:10 +0800 Subject: [PATCH 3/3] update --- src/views/MicroExhibition/index.vue | 157 ++++++++++++---------------- 1 file changed, 65 insertions(+), 92 deletions(-) diff --git a/src/views/MicroExhibition/index.vue b/src/views/MicroExhibition/index.vue index 55d8156..551e5d1 100644 --- a/src/views/MicroExhibition/index.vue +++ b/src/views/MicroExhibition/index.vue @@ -78,9 +78,9 @@ 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') +let videoUrl = ref('https://d.tufting222.cn/video/yzy/a.mp4') const videoElement = ref(null) - +let timer = null let fqdata = ref({ list: [], @@ -121,21 +121,13 @@ let hzdata = ref([]) let xData = ref([]) let seriesData = ref([ ]) -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'],] - //获取echarts数据 +//获取echarts数据 function getDeviceProduction() { getmDeviceProduction().then((res: any) => { if (res.code == 200) { let data = res.data - console.log(data.series, 'data.series'); - - seriesData.value = data.series.map(item=>{ + seriesData.value = data.series.map(item => { return { name: item.name == '计划完成' ? '计划产量' : '实际产量', type: 'bar', @@ -152,22 +144,21 @@ 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, + '裁剪设备': cjdata.value, + '缝前设备': fqdata.value, + '缝中设备': fzdata.value, } const statusObj = { - '裁剪设备':0, - '缝前设备':1, - '缝中设备':2, + '裁剪设备': 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') { + if (item.status != 'false' || item.status != '0') { online++ } let temp = item.status @@ -181,44 +172,10 @@ function getmDevList() { 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') { + if (item.status != 'false' || item.status != '0') { online++ } let temp = item.status @@ -236,8 +193,6 @@ function getmDevList() { workTime: item.workTime, } }) - console.log(hzdata.value, 'hzdata.value'); - stepList[3].online = online; stepList[3].total = hzdata.value.length; } @@ -246,6 +201,53 @@ function getmDevList() { }) } +/* + 改变设备状态 + { + step:'裁剪设备', + num:1, + status:0 + } + */ +function changestatus(val) { + const devObj = { + '裁剪设备': cjdata.value, + '缝前设备': fqdata.value, + '缝中设备': fzdata.value, + } + const statusObj = { + '裁剪设备': 0, + '缝前设备': 1, + '缝中设备': 2, + } + if (val.step == "后整设备") { + let hzdataIndex = hzdata.value.find((item, index) => { + return item.num == val.num + }) + if (hzdataIndex !== -1 && hzdata.value[hzdataIndex].status != val.status) { + hzdata.value[hzdataIndex].status = val.status + if (val.status == '0') { + stepList[3].online -= 1 + } else { + stepList[3].online += 1 + } + + } + } else { + let dataIndex = devObj[val.step].list.findIndex((item, index) => { + return item[2] == val.num + }) + if (dataIndex !== -1 && devObj[val.step].list[dataIndex][3] != val.status) { + devObj[val.step].list[dataIndex][3] = val.status + if (val.status == '0') { + stepList[statusObj[val.step]].online -= 1 + } else { + stepList[statusObj[val.step]].online += 1 + } + } + } +} + function getWebsocket(val) { @@ -270,52 +272,23 @@ function errWebsocket(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(() => { getDeviceProduction() getmDevList() + timer = setInterval(() => { + getDeviceProduction() + getmDevList() + }, 60*1000) connectWebsocket(null, null, getWebsocket, errWebsocket) document.getElementById('app').style.backgroundColor = 'rgba(0, 11, 18, 1)' }) onUnmounted(() => { closeWebsocket() - document.getElementById('app').style.backgroundColor = 'rgba(0, 11, 18, 1)' + clearInterval(timer) + document.getElementById('app').style.backgroundColor = '#100c2a' })