hanzhengzheng/screenFront
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
hzz 2023-12-07 16:49:09 +08:00
parent fb1431d1e3
commit b82917ebb4
8 changed files with 498 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/http/MicroExhibition/index.ts Normal file
View File

@ -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')
}

108
src/utils/httpEmpty.ts Normal file
View File

@ -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)
})
})
}

100
src/views/MicroExhibition/component/BarChart.vue Normal file
View File

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

3
src/views/MicroExhibition/component/Border.vue
View File

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

48
src/views/MicroExhibition/component/BottomBorder.vue
View File

@ -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="dev-name">自动烫裤机</div>
<div class="rbottom-bg" v-for="i in (prop.data as any)">
<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>
</div>
<div>50%</div>
<div>{{ i.ratio }}</div>
</div>
<div class="dev-status">
<div class="status1">编号：2</div>
<div class="status2">状态：运行</div>
<div class="status1">编号：{{ i.num }}</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>

8
src/views/MicroExhibition/component/ScrollBoard.vue
View File

@ -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
})

2
src/views/MicroExhibition/component/StepItem.vue
View File

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

241
src/views/MicroExhibition/index.vue
View File

@ -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">
<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"
type="video/mp4" />
<video controls loop autoplay="true" ref="videoElement" width="777">
<source :src="videoUrl" 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;