微工厂大屏更新，未完成
This commit is contained in:
hzz
parent
167ff82757
commit
01b53f3c4d
31
package-lock.json
generated
31
package-lock.json
generated
@ -9,6 +9,7 @@
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@dataview/datav-vue3": "^0.0.0-test.1672506674342",
|
||||
"@iamzzg/data-view": "^2.10.0",
|
||||
"@jiaminghi/data-view": "^2.10.0",
|
||||
"@tweenjs/tween.js": "^19.0.0",
|
||||
"axios": "^1.3.2",
|
||||
@ -1785,6 +1786,15 @@
|
||||
"@hapi/hoek": "^9.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@iamzzg/data-view": {
|
||||
"version": "2.10.0",
|
||||
"resolved": "https://registry.npmmirror.com/@iamzzg/data-view/-/data-view-2.10.0.tgz",
|
||||
"integrity": "sha512-UafIJaEqHIgEC+8CaEL0qQxG34JsgKOc13RkYjlupOIAoELNkWXCrYN89xOP+RkSreBTpgaTEt43PfW4EMMjcQ==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.5.5",
|
||||
"@jiaminghi/charts": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@intlify/core-base": {
|
||||
"version": "9.2.2",
|
||||
"resolved": "https://registry.npmmirror.com/@intlify/core-base/-/core-base-9.2.2.tgz",
|
||||
@ -4050,9 +4060,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/caniuse-lite": {
|
||||
"version": "1.0.30001449",
|
||||
"resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001449.tgz",
|
||||
"integrity": "sha512-CPB+UL9XMT/Av+pJxCKGhdx+yg1hzplvFJQlJ2n68PyQGMz9L/E2zCyLdOL8uasbouTUgnPl+y0tccI/se+BEw==",
|
||||
"version": "1.0.30001532",
|
||||
"resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001532.tgz",
|
||||
"integrity": "sha512-FbDFnNat3nMnrROzqrsg314zhqN5LGQ1kyyMk2opcrwGbVGpHRhgCWtAgD5YJUqNAiQ+dklreil/c3Qf1dfCTw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/case-sensitive-paths-webpack-plugin": {
|
||||
@ -13390,6 +13400,15 @@
|
||||
"@hapi/hoek": "^9.0.0"
|
||||
}
|
||||
},
|
||||
"@iamzzg/data-view": {
|
||||
"version": "2.10.0",
|
||||
"resolved": "https://registry.npmmirror.com/@iamzzg/data-view/-/data-view-2.10.0.tgz",
|
||||
"integrity": "sha512-UafIJaEqHIgEC+8CaEL0qQxG34JsgKOc13RkYjlupOIAoELNkWXCrYN89xOP+RkSreBTpgaTEt43PfW4EMMjcQ==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.5.5",
|
||||
"@jiaminghi/charts": "*"
|
||||
}
|
||||
},
|
||||
"@intlify/core-base": {
|
||||
"version": "9.2.2",
|
||||
"resolved": "https://registry.npmmirror.com/@intlify/core-base/-/core-base-9.2.2.tgz",
|
||||
@ -15280,9 +15299,9 @@
|
||||
}
|
||||
},
|
||||
"caniuse-lite": {
|
||||
"version": "1.0.30001449",
|
||||
"resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001449.tgz",
|
||||
"integrity": "sha512-CPB+UL9XMT/Av+pJxCKGhdx+yg1hzplvFJQlJ2n68PyQGMz9L/E2zCyLdOL8uasbouTUgnPl+y0tccI/se+BEw==",
|
||||
"version": "1.0.30001532",
|
||||
"resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001532.tgz",
|
||||
"integrity": "sha512-FbDFnNat3nMnrROzqrsg314zhqN5LGQ1kyyMk2opcrwGbVGpHRhgCWtAgD5YJUqNAiQ+dklreil/c3Qf1dfCTw==",
|
||||
"dev": true
|
||||
},
|
||||
"case-sensitive-paths-webpack-plugin": {
|
||||
|
||||
83
src/views/MicroExhibition/component/Border.vue
Normal file
83
src/views/MicroExhibition/component/Border.vue
Normal file
@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<div class="newboder">
|
||||
<!-- <img class="borderpng" src="" alt=""> -->
|
||||
<div class="title">
|
||||
<text class="title-text">{{ title }}</text>
|
||||
<div class="hr"></div>
|
||||
</div>
|
||||
|
||||
<div class="newboder-content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { computed } from 'vue'
|
||||
let prop = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: '裁剪设备'
|
||||
}
|
||||
})
|
||||
|
||||
// let newTitle = computed(() => {
|
||||
// return prop.title.split('').join(' ')
|
||||
// })
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.newboder {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background: url(./../images/border.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.borderpng {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.title {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 16%;
|
||||
text-align: left;
|
||||
font-family: "华文新魏", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 28px;
|
||||
color: rgba(0, 255, 255, 0.996078431372549);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
.hr {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: url(./../images/hr.png) no-repeat;
|
||||
background-position: 50%;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
margin-left: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.newboder-content {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
112
src/views/MicroExhibition/component/Header.vue
Normal file
112
src/views/MicroExhibition/component/Header.vue
Normal file
@ -0,0 +1,112 @@
|
||||
<!--
|
||||
* @Author: hzz hzz
|
||||
* @Date: 2023-12-05 13:38:58
|
||||
* @LastEditors: hzz hzz
|
||||
* @LastEditTime: 2023-12-05 14:49:17
|
||||
* @FilePath: \screenFront\src\views\MicroExhibition\component\Header.vue
|
||||
* @Description:
|
||||
*
|
||||
* Copyright (c) 2023 by ${hzz}, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
<div class="headerbg" :style="prop.wh">
|
||||
<span>{{ prop.title }}</span>
|
||||
<div class="left-tip-type">
|
||||
<div class="left-tip-type-item">
|
||||
<div class="yuan green"></div>
|
||||
<div class="left-tip-type-item-text">工作</div>
|
||||
</div>
|
||||
<div class="left-tip-type-item">
|
||||
<div class="yuan yello"></div>
|
||||
<div class="left-tip-type-item-text">待机</div>
|
||||
</div>
|
||||
<div class="left-tip-type-item">
|
||||
<div class="yuan red"></div>
|
||||
<div class="left-tip-type-item-text">停机</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
|
||||
const prop = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: '标题'
|
||||
},
|
||||
wh: {
|
||||
type: Object,
|
||||
default: {
|
||||
width: '100%',
|
||||
height: '100px'
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.headerbg {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: url('./../images/header.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
font-family: "华文新魏", sans-serif;
|
||||
}
|
||||
|
||||
.headerbg span {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 40px;
|
||||
color: rgba(0, 255, 255, 0.996078431372549);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.left-tip-type {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 462px;
|
||||
width: 160px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.left-tip-type-item {
|
||||
width: 33%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.yuan {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: #7CFFB2;
|
||||
}
|
||||
|
||||
.yello {
|
||||
background-color: #FDDD60;
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: #FF6E76;
|
||||
}
|
||||
</style>
|
||||
BIN
src/views/MicroExhibition/images/border.png
Normal file
BIN
src/views/MicroExhibition/images/border.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
BIN
src/views/MicroExhibition/images/header.png
Normal file
BIN
src/views/MicroExhibition/images/header.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
src/views/MicroExhibition/images/hr.png
Normal file
BIN
src/views/MicroExhibition/images/hr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
@ -1,114 +1,52 @@
|
||||
<!--
|
||||
* @Author: hzz hzz
|
||||
* @Date: 2023-12-05 13:30:45
|
||||
* @LastEditors: hzz hzz
|
||||
* @LastEditTime: 2023-12-05 16:54:15
|
||||
* @FilePath: \screenFront\src\views\MicroExhibition\index.vue
|
||||
* @Description:
|
||||
*
|
||||
* Copyright (c) 2023 by ${hzz}, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'设备工况物联系统'" :titleTip="[]"
|
||||
:typeFun="['time']" :alarmType="[]"></header2>
|
||||
<Header :title="'富怡服装微工厂物联管理平台'" :wh="{ width: '100%', height: '100px'}"></Header>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="left">
|
||||
<div class="lt">
|
||||
<NewBoder :title="'裁剪设备'">
|
||||
<DevCard :dev_title="dev_caijian_title" :dev_value="store.caijian.value">
|
||||
<BarChart style="width: 100%;height: 100%;" :xData="store.caijian.chart.xData"
|
||||
:seriesData="store.caijian.chart.series"></BarChart>
|
||||
</DevCard>
|
||||
</NewBoder>
|
||||
<div class="ltop">
|
||||
<BoardVue :title="'裁剪设备'"></BoardVue>
|
||||
</div>
|
||||
<div class="lb">
|
||||
<NewBoder :title="'缝中设备'">
|
||||
<BoardBar :data="store.fengzhong.value" :xData="store.fengzhong.chart.xData"
|
||||
:seriesData="store.fengzhong.chart.series"></BoardBar>
|
||||
</NewBoder>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center">
|
||||
<div class="ct">
|
||||
<div class="top-item">
|
||||
<h2>设备在线</h2>
|
||||
<div class="div_p" style="color: #ff9e5b;font-size: 40px;">
|
||||
<div class="dev-top" style="color: #7CFFB2;">{{ store.devnum.on + store.devnum.wait }}</div>
|
||||
<div class="dev-center"></div>
|
||||
<div class="dev-bottom">{{ store.devnum.all }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-item">
|
||||
<h2>网关状态</h2>
|
||||
<div class="div_p" style="transform: translate(0px, 10px);">
|
||||
<i :class="true
|
||||
? 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan on'
|
||||
: 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan off'
|
||||
"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cc">
|
||||
<NewBoder :title="'设备状态总览'">
|
||||
<ringChart :data="ringData"></ringChart>
|
||||
</NewBoder>
|
||||
</div>
|
||||
<div class="cb">
|
||||
<NewBoder :title="'版房设备'">
|
||||
<BoardBar :data="store.banfang.value" :xData="store.banfang.chart.xData"
|
||||
:seriesData="store.banfang.chart.series"></BoardBar>
|
||||
</NewBoder>
|
||||
<div class="lbottom">
|
||||
<BoardVue :title="'缝前设备'"></BoardVue>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="rt">
|
||||
<NewBoder :title="'一次性拖鞋自动生产线'">
|
||||
<DevCard :dev_title="dev_tuoxie_title" :dev_value="store.tuoxie.value">
|
||||
<BarChart style="width: 100%;height: 100%;" :xData="store.tuoxie.chart.xData"
|
||||
:seriesData="store.tuoxie.chart.series"></BarChart>
|
||||
</DevCard>
|
||||
</NewBoder>
|
||||
<div class="rtop">
|
||||
<div class="rtleft">
|
||||
<div class="rtltop"></div>
|
||||
<div class="rtlbottom"></div>
|
||||
</div>
|
||||
<div class="rb">
|
||||
<NewBoder :title="'座椅面套生产线'">
|
||||
<BoardBar :data="store.zuoyi.value" :xData="store.zuoyi.chart.xData"
|
||||
:seriesData="store.zuoyi.chart.series"></BoardBar>
|
||||
</NewBoder>
|
||||
<div class="rtright">
|
||||
<BoardVue :title="'缝中设备'"></BoardVue>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rbottom">
|
||||
右下
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left-tip-type">
|
||||
<div class="left-tip-type-item">
|
||||
<div class="yuan green"></div>
|
||||
<div class="left-tip-type-item-text">工作</div>
|
||||
</div>
|
||||
<div class="left-tip-type-item">
|
||||
<div class="yuan yello"></div>
|
||||
<div class="left-tip-type-item-text">待机</div>
|
||||
</div>
|
||||
<div class="left-tip-type-item">
|
||||
<div class="yuan red"></div>
|
||||
<div class="left-tip-type-item-text">停机</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-tip-type">
|
||||
<div class="right-tip-type-item blue">
|
||||
<div class="iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan gatway"></div>
|
||||
<div class="left-tip-type-item-text">在 线</div>
|
||||
</div>
|
||||
<div class="right-tip-type-item err">
|
||||
<div class="iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan gatway"></div>
|
||||
<div class="left-tip-type-item-text">离 线</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrap"></div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import header2 from './components/header2.vue'
|
||||
import NewBoder from './components/NewBoder.vue';
|
||||
import DevCard from "./components/DevCard.vue";
|
||||
import BarChart from './components/BarChart.vue'
|
||||
import ringChart from "./components/ringChart.vue";
|
||||
import BoardBar from "./components/BoardBar.vue";
|
||||
import Header from './component/Header.vue'
|
||||
import BoardVue from './component/Border.vue'
|
||||
|
||||
import { getTopDevice, getCismaList } from '@/http/cisma'
|
||||
import { ref, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated, computed } from 'vue'
|
||||
import { useMicroExhibitionStore } from '@/store/module/MicroExhibition'
|
||||
import { connectWebsocket, closeWebsocket } from "@/utils/websocket"
|
||||
@ -116,64 +54,27 @@ import { connectWebsocket, closeWebsocket } from "@/utils/websocket"
|
||||
import { useI18n } from 'vue-i18n'
|
||||
let { t } = useI18n();
|
||||
const store = useMicroExhibitionStore()
|
||||
let ringData = computed(() => {
|
||||
return [
|
||||
{ name: '工作', value: store.devnum.on },
|
||||
{ name: '停机', value: store.devnum.off },
|
||||
{ name: '待机', value: store.devnum.wait },
|
||||
]
|
||||
})
|
||||
|
||||
let timer = null
|
||||
let dev_caijian_title = ['设备名称', '设备编码','完成率', '稼动率', '状态']
|
||||
let dev_tuoxie_title = ['设备编码','完成率', '稼动率', '状态']
|
||||
let dev_value = [
|
||||
['全自动针梭两用铺布机', '待机', '40层', '1'],
|
||||
['全自动9公分电脑裁床', '待机', '40层', '0'],
|
||||
]
|
||||
let dev_caijian_title = ['设备名称', '编号','状态', '稼动率', '工作时长']
|
||||
|
||||
|
||||
let throttle_timer = null
|
||||
function throttle (fn, delay = 300) {
|
||||
if(throttle_timer == null){
|
||||
throttle_timer = setTimeout(() => {
|
||||
fn()
|
||||
|
||||
clearTimeout(throttle_timer)
|
||||
throttle_timer = null
|
||||
}, delay);
|
||||
}
|
||||
}
|
||||
|
||||
async function getTopDeviceData() {
|
||||
let res = await getTopDevice() as any
|
||||
if (res.code === 200) {
|
||||
store.setbanfang(res.data.版房设备)
|
||||
store.setcaijian(res.data.裁剪设备)
|
||||
store.setfengzhong(res.data.缝中设备)
|
||||
store.settuoxie(res.data.拖鞋自动生产线)
|
||||
store.setzuoyi(res.data.座椅面套生产线)
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
async function getCismaListData() {
|
||||
let res = await getCismaList() as any
|
||||
if (res.code === 200) {
|
||||
store.setDevnum(res.data.devnum)
|
||||
}
|
||||
}
|
||||
|
||||
function getWebsocket(val) {
|
||||
try {
|
||||
let data = JSON.parse(val)
|
||||
|
||||
|
||||
if (data.type == 'StateChart') {
|
||||
store.setDevnum(data.msg)
|
||||
}
|
||||
if (data.type == 'WorkingState') {
|
||||
store.changestatus(data.msg)
|
||||
}
|
||||
// if (data.type == 'StateChart') {
|
||||
// store.setDevnum(data.msg)
|
||||
// }
|
||||
// if (data.type == 'WorkingState') {
|
||||
// store.changestatus(data.msg)
|
||||
// }
|
||||
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
@ -185,20 +86,13 @@ function errWebsocket(val) {
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getTopDeviceData()
|
||||
getCismaListData()
|
||||
timer = setInterval(()=>{
|
||||
getTopDeviceData()
|
||||
},5000)
|
||||
connectWebsocket(null, null, getWebsocket, errWebsocket)
|
||||
document.getElementById('app').style.backgroundColor = '#0E0E0E'
|
||||
document.getElementById('app').style.backgroundColor = 'rgba(0, 11, 18, 1)'
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer)
|
||||
|
||||
closeWebsocket()
|
||||
document.getElementById('app').style.backgroundColor = '#100c2a'
|
||||
document.getElementById('app').style.backgroundColor = 'rgba(0, 11, 18, 1)'
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -208,7 +102,7 @@ onUnmounted(() => {
|
||||
height: 1080px;
|
||||
width: 1920px;
|
||||
color: #FFFFFF;
|
||||
background-color: #0E0E0E;
|
||||
background-color: rgba(0, 11, 18, 1);
|
||||
position: relative;
|
||||
|
||||
}
|
||||
@ -228,111 +122,52 @@ onUnmounted(() => {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.left,
|
||||
.left {
|
||||
width: 540px;
|
||||
height: 100%;
|
||||
margin-left: 13px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.ltop {
|
||||
width: 100%;
|
||||
height: 630px;
|
||||
}
|
||||
|
||||
.lbottom {
|
||||
width: 100%;
|
||||
height: 335px;
|
||||
}
|
||||
|
||||
.right {
|
||||
height: 980px;
|
||||
width: 600px;
|
||||
width: 1330px;
|
||||
height: 100%;
|
||||
margin-right: 13px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.center {
|
||||
width: 670px;
|
||||
height: 980px;
|
||||
margin: 0 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.lt,
|
||||
.rt {
|
||||
.rtop {
|
||||
width: 100%;
|
||||
height: 450px;
|
||||
}
|
||||
|
||||
.lb,
|
||||
.rb {
|
||||
width: 100%;
|
||||
height: 530px;
|
||||
}
|
||||
|
||||
.ct {
|
||||
width: 100%;
|
||||
height: 110px;
|
||||
height: 715px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.cc {
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
.cb {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.top-item {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
background-image: url(@/assets/img/u8.png);
|
||||
background-size: 100% 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.top-item .div_p {
|
||||
height: 60%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.div_p .div-p-tip {
|
||||
position: absolute;
|
||||
font-size: 1.5rem;
|
||||
top: 10%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
/* color: #fff; */
|
||||
font-size: 18px;
|
||||
line-height: 1.5rem;
|
||||
color: #02C1D7;
|
||||
}
|
||||
|
||||
.on {
|
||||
color: #20AEC5;
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
|
||||
.off {
|
||||
color: #797979;
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
|
||||
.left-tip-type {
|
||||
position: absolute;
|
||||
top: 69px;
|
||||
left: 462px;
|
||||
width: 160px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.left-tip-type-item {
|
||||
width: 33%;
|
||||
.rbottom {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
background: #bfe;
|
||||
}
|
||||
|
||||
.rtleft {
|
||||
width: 777px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -340,87 +175,26 @@ h2 {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.yuan {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
.rtltop {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
background: #bff;
|
||||
}
|
||||
.rtlbottom {
|
||||
width: 100%;
|
||||
height: 580px;
|
||||
background: #bf1;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: #7CFFB2;
|
||||
}
|
||||
|
||||
.yello {
|
||||
background-color: #FDDD60;
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: #FF6E76;
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: #20AEC5;
|
||||
}
|
||||
|
||||
.err {
|
||||
color: #FF6E76;
|
||||
}
|
||||
|
||||
.right-tip-type {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 1550px;
|
||||
width: 120px;
|
||||
height: 70px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.right-tip-type-item {
|
||||
width: 58px;
|
||||
.rtright {
|
||||
width: 540px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.gatway {
|
||||
font-size: 42px;
|
||||
}
|
||||
|
||||
|
||||
.wrap {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 582px;
|
||||
width: 537px;
|
||||
border-bottom: 0px solid transparent;
|
||||
border-top: 92px solid #0E1D2F;
|
||||
border-left: 109px solid transparent;
|
||||
border-right: 110px solid transparent;
|
||||
}
|
||||
|
||||
.dev-center {
|
||||
width: 3px;
|
||||
height: 60px;
|
||||
background-image: linear-gradient(to bottom, #2869E8, #00D0FF);
|
||||
background-color: #5067BC;
|
||||
transform: rotate(40deg) translate(7px, -6px);
|
||||
}
|
||||
|
||||
.dev-top {
|
||||
transform: translate(-6px, -10px);
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.dev-bottom {
|
||||
transform: translate(15px, 15px);
|
||||
font-size: 30px;
|
||||
}
|
||||
.left-tip-type-item-text {
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
426
src/views/MicroExhibition/indexOld.vue
Normal file
426
src/views/MicroExhibition/indexOld.vue
Normal file
@ -0,0 +1,426 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'设备工况物联系统'" :titleTip="[]"
|
||||
:typeFun="['time']" :alarmType="[]"></header2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="left">
|
||||
<div class="lt">
|
||||
<NewBoder :title="'裁剪设备'">
|
||||
<DevCard :dev_title="dev_caijian_title" :dev_value="store.caijian.value">
|
||||
<BarChart style="width: 100%;height: 100%;" :xData="store.caijian.chart.xData"
|
||||
:seriesData="store.caijian.chart.series"></BarChart>
|
||||
</DevCard>
|
||||
</NewBoder>
|
||||
</div>
|
||||
<div class="lb">
|
||||
<NewBoder :title="'缝中设备'">
|
||||
<BoardBar :data="store.fengzhong.value" :xData="store.fengzhong.chart.xData"
|
||||
:seriesData="store.fengzhong.chart.series"></BoardBar>
|
||||
</NewBoder>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center">
|
||||
<div class="ct">
|
||||
<div class="top-item">
|
||||
<h2>设备在线</h2>
|
||||
<div class="div_p" style="color: #ff9e5b;font-size: 40px;">
|
||||
<div class="dev-top" style="color: #7CFFB2;">{{ store.devnum.on + store.devnum.wait }}</div>
|
||||
<div class="dev-center"></div>
|
||||
<div class="dev-bottom">{{ store.devnum.all }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-item">
|
||||
<h2>网关状态</h2>
|
||||
<div class="div_p" style="transform: translate(0px, 10px);">
|
||||
<i :class="true
|
||||
? 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan on'
|
||||
: 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan off'
|
||||
"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cc">
|
||||
<NewBoder :title="'设备状态总览'">
|
||||
<ringChart :data="ringData"></ringChart>
|
||||
</NewBoder>
|
||||
</div>
|
||||
<div class="cb">
|
||||
<NewBoder :title="'版房设备'">
|
||||
<BoardBar :data="store.banfang.value" :xData="store.banfang.chart.xData"
|
||||
:seriesData="store.banfang.chart.series"></BoardBar>
|
||||
</NewBoder>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="rt">
|
||||
<NewBoder :title="'一次性拖鞋自动生产线'">
|
||||
<DevCard :dev_title="dev_tuoxie_title" :dev_value="store.tuoxie.value">
|
||||
<BarChart style="width: 100%;height: 100%;" :xData="store.tuoxie.chart.xData"
|
||||
:seriesData="store.tuoxie.chart.series"></BarChart>
|
||||
</DevCard>
|
||||
</NewBoder>
|
||||
</div>
|
||||
<div class="rb">
|
||||
<NewBoder :title="'座椅面套生产线'">
|
||||
<BoardBar :data="store.zuoyi.value" :xData="store.zuoyi.chart.xData"
|
||||
:seriesData="store.zuoyi.chart.series"></BoardBar>
|
||||
</NewBoder>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left-tip-type">
|
||||
<div class="left-tip-type-item">
|
||||
<div class="yuan green"></div>
|
||||
<div class="left-tip-type-item-text">工作</div>
|
||||
</div>
|
||||
<div class="left-tip-type-item">
|
||||
<div class="yuan yello"></div>
|
||||
<div class="left-tip-type-item-text">待机</div>
|
||||
</div>
|
||||
<div class="left-tip-type-item">
|
||||
<div class="yuan red"></div>
|
||||
<div class="left-tip-type-item-text">停机</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-tip-type">
|
||||
<div class="right-tip-type-item blue">
|
||||
<div class="iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan gatway"></div>
|
||||
<div class="left-tip-type-item-text">在 线</div>
|
||||
</div>
|
||||
<div class="right-tip-type-item err">
|
||||
<div class="iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan gatway"></div>
|
||||
<div class="left-tip-type-item-text">离 线</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrap"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import header2 from './components/header2.vue'
|
||||
import NewBoder from './components/NewBoder.vue';
|
||||
import DevCard from "./components/DevCard.vue";
|
||||
import BarChart from './components/BarChart.vue'
|
||||
import ringChart from "./components/ringChart.vue";
|
||||
import BoardBar from "./components/BoardBar.vue";
|
||||
|
||||
import { getTopDevice, getCismaList } from '@/http/cisma'
|
||||
import { ref, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated, computed } from 'vue'
|
||||
import { useMicroExhibitionStore } from '@/store/module/MicroExhibition'
|
||||
import { connectWebsocket, closeWebsocket } from "@/utils/websocket"
|
||||
|
||||
import { useI18n } from 'vue-i18n'
|
||||
let { t } = useI18n();
|
||||
const store = useMicroExhibitionStore()
|
||||
let ringData = computed(() => {
|
||||
return [
|
||||
{ name: '工作', value: store.devnum.on },
|
||||
{ name: '停机', value: store.devnum.off },
|
||||
{ name: '待机', value: store.devnum.wait },
|
||||
]
|
||||
})
|
||||
let timer = null
|
||||
let dev_caijian_title = ['设备名称', '设备编码','完成率', '稼动率', '状态']
|
||||
let dev_tuoxie_title = ['设备编码','完成率', '稼动率', '状态']
|
||||
let dev_value = [
|
||||
['全自动针梭两用铺布机', '待机', '40层', '1'],
|
||||
['全自动9公分电脑裁床', '待机', '40层', '0'],
|
||||
]
|
||||
|
||||
|
||||
let throttle_timer = null
|
||||
function throttle (fn, delay = 300) {
|
||||
if(throttle_timer == null){
|
||||
throttle_timer = setTimeout(() => {
|
||||
fn()
|
||||
|
||||
clearTimeout(throttle_timer)
|
||||
throttle_timer = null
|
||||
}, delay);
|
||||
}
|
||||
}
|
||||
|
||||
async function getTopDeviceData() {
|
||||
let res = await getTopDevice() as any
|
||||
if (res.code === 200) {
|
||||
store.setbanfang(res.data.版房设备)
|
||||
store.setcaijian(res.data.裁剪设备)
|
||||
store.setfengzhong(res.data.缝中设备)
|
||||
store.settuoxie(res.data.拖鞋自动生产线)
|
||||
store.setzuoyi(res.data.座椅面套生产线)
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
async function getCismaListData() {
|
||||
let res = await getCismaList() as any
|
||||
if (res.code === 200) {
|
||||
store.setDevnum(res.data.devnum)
|
||||
}
|
||||
}
|
||||
|
||||
function getWebsocket(val) {
|
||||
try {
|
||||
let data = JSON.parse(val)
|
||||
|
||||
|
||||
if (data.type == 'StateChart') {
|
||||
store.setDevnum(data.msg)
|
||||
}
|
||||
if (data.type == 'WorkingState') {
|
||||
store.changestatus(data.msg)
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
|
||||
}
|
||||
function errWebsocket(val) {
|
||||
// console.log(val);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getTopDeviceData()
|
||||
getCismaListData()
|
||||
timer = setInterval(()=>{
|
||||
getTopDeviceData()
|
||||
},5000)
|
||||
connectWebsocket(null, null, getWebsocket, errWebsocket)
|
||||
document.getElementById('app').style.backgroundColor = '#0E0E0E'
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer)
|
||||
|
||||
closeWebsocket()
|
||||
document.getElementById('app').style.backgroundColor = '#100c2a'
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
height: 1080px;
|
||||
width: 1920px;
|
||||
color: #FFFFFF;
|
||||
background-color: #0E0E0E;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.header {
|
||||
height: 100px;
|
||||
width: 1920px;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 980px;
|
||||
width: 1920px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: 0 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.left,
|
||||
.right {
|
||||
height: 980px;
|
||||
width: 600px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.center {
|
||||
width: 670px;
|
||||
height: 980px;
|
||||
margin: 0 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.lt,
|
||||
.rt {
|
||||
width: 100%;
|
||||
height: 450px;
|
||||
}
|
||||
|
||||
.lb,
|
||||
.rb {
|
||||
width: 100%;
|
||||
height: 530px;
|
||||
}
|
||||
|
||||
.ct {
|
||||
width: 100%;
|
||||
height: 110px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.cc {
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
.cb {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.top-item {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
background-image: url(@/assets/img/u8.png);
|
||||
background-size: 100% 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.top-item .div_p {
|
||||
height: 60%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.div_p .div-p-tip {
|
||||
position: absolute;
|
||||
font-size: 1.5rem;
|
||||
top: 10%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
/* color: #fff; */
|
||||
font-size: 18px;
|
||||
line-height: 1.5rem;
|
||||
color: #02C1D7;
|
||||
}
|
||||
|
||||
.on {
|
||||
color: #20AEC5;
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
|
||||
.off {
|
||||
color: #797979;
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
|
||||
.left-tip-type {
|
||||
position: absolute;
|
||||
top: 69px;
|
||||
left: 462px;
|
||||
width: 160px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.left-tip-type-item {
|
||||
width: 33%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.yuan {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: #7CFFB2;
|
||||
}
|
||||
|
||||
.yello {
|
||||
background-color: #FDDD60;
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: #FF6E76;
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: #20AEC5;
|
||||
}
|
||||
|
||||
.err {
|
||||
color: #FF6E76;
|
||||
}
|
||||
|
||||
.right-tip-type {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 1550px;
|
||||
width: 120px;
|
||||
height: 70px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.right-tip-type-item {
|
||||
width: 58px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.gatway {
|
||||
font-size: 42px;
|
||||
}
|
||||
|
||||
|
||||
.wrap {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 582px;
|
||||
width: 537px;
|
||||
border-bottom: 0px solid transparent;
|
||||
border-top: 92px solid #0E1D2F;
|
||||
border-left: 109px solid transparent;
|
||||
border-right: 110px solid transparent;
|
||||
}
|
||||
|
||||
.dev-center {
|
||||
width: 3px;
|
||||
height: 60px;
|
||||
background-image: linear-gradient(to bottom, #2869E8, #00D0FF);
|
||||
background-color: #5067BC;
|
||||
transform: rotate(40deg) translate(7px, -6px);
|
||||
}
|
||||
|
||||
.dev-top {
|
||||
transform: translate(-6px, -10px);
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.dev-bottom {
|
||||
transform: translate(15px, 15px);
|
||||
font-size: 30px;
|
||||
}
|
||||
.left-tip-type-item-text {
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user