408 lines
11 KiB
Vue
408 lines
11 KiB
Vue
<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;">
|
|
<!-- <i class="iconfont icon-zhengque1 div-p-tip"></i> -->
|
|
<h5>{{ store.devnum.all }} {{ t('messages.units') }}</h5>
|
|
</div>
|
|
</div>
|
|
<div class="top-item">
|
|
<h2>网关状态</h2>
|
|
<div class="div_p">
|
|
<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'],
|
|
]
|
|
|
|
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=='CISMA_chart'){
|
|
// let obj = JSON.parse(data.msg.replace(/'/g,'"'))
|
|
// console.log(obj);
|
|
|
|
// for(let key in obj){
|
|
// console.log(key,obj[key]);
|
|
|
|
// if (key == "版房设备") {
|
|
// store.setbanfang(obj[key])
|
|
// } else if(key == "裁剪设备") {
|
|
// store.setcaijian(obj[key])
|
|
// } else if(key == "缝中设备") {
|
|
// store.setfengzhong(obj[key])
|
|
// } else if(key == "拖鞋自动生产线") {
|
|
// store.settuoxie(obj[key])
|
|
// } else if(key == "座椅面套生产线") {
|
|
// store.setzuoyi(obj[key])
|
|
// }
|
|
|
|
// }
|
|
// }
|
|
|
|
} catch (err) {
|
|
console.log(err);
|
|
}
|
|
|
|
}
|
|
function errWebsocket(val) {
|
|
// console.log(val);
|
|
}
|
|
|
|
onMounted(() => {
|
|
getTopDeviceData()
|
|
getCismaListData()
|
|
timer = setInterval(() => {
|
|
getTopDeviceData()
|
|
}, 10000)
|
|
connectWebsocket(null, null, getWebsocket, errWebsocket)
|
|
document.getElementById('app').style.backgroundColor = '#0E0E0E'
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
clearInterval(timer)
|
|
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;
|
|
}
|
|
|
|
.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: 36px;
|
|
}
|
|
|
|
|
|
.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;
|
|
}
|
|
</style>
|