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

Merge branch 'master' of https://codeup.aliyun.com/645deca397d94d909e439238/iotplatform_sourcecode/screenFront into rule

Browse Source
This commit is contained in:
hzz 2023-12-13 15:35:37 +08:00
commit f70d0509b8
8 changed files with 484 additions and 37 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>

54
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>
<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,7 +129,8 @@
justify-content: space-around;
align-items: center;
}
.ele-progress {
.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>

234
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('https://d.tufting222.cn/video/yzy/a.mp4')
const videoElement = ref(null)
let timer = null
let fqdata = ref({
list: [],
rowNum: 3,
@ -79,18 +90,163 @@ let fzdata = ref({
list: [],
rowNum: 10,
})
let listdata = reactive([])
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);
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([])
let seriesData = ref([
])
//获取echarts数据
function getDeviceProduction() {
getmDeviceProduction().then((res: any) => {
if (res.code == 200) {
let data = res.data
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) {
let data = res.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 != 'false' || item.status != '0') {
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;
hzdata.value = data[key].map((item: any, i: number) => {
if (item.status != 'false' || item.status != '0') {
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,
}
})
stepList[3].online = online;
stepList[3].total = hzdata.value.length;
}
}
}
})
}
/*
改变设备状态
{
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
}
}
}
}
@ -115,14 +271,24 @@ function errWebsocket(val) {
// console.log(val);
}
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'
})
</script>
@ -167,6 +333,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;