1.机械分厂大屏原型实现
This commit is contained in:
15133876896-BGG25
parent
3fc6935718
commit
bd6a2dd4b5
@ -1,5 +1,5 @@
|
|||||||
/*
|
/*
|
||||||
* @FilePath: \wwwd:\code\screenFront\src\store\module\Mechanics.ts
|
* @FilePath: \code\gitscreenFront\src\store\module\Mechanics.ts
|
||||||
* @Author: 王路平
|
* @Author: 王路平
|
||||||
* @文件版本: V1.0.0
|
* @文件版本: V1.0.0
|
||||||
* @Date: 2023-02-06 15:58:13
|
* @Date: 2023-02-06 15:58:13
|
||||||
@ -102,7 +102,11 @@ export const useMechanicsStore = defineStore(Names.Mechanics, {
|
|||||||
//需要使用return将数据抛出
|
//需要使用return将数据抛出
|
||||||
//getters内可相互使用计算结果
|
//getters内可相互使用计算结果
|
||||||
//使用时可直接放入标签内<div>Index.方法()</div>
|
//使用时可直接放入标签内<div>Index.方法()</div>
|
||||||
getters: {},
|
getters: {
|
||||||
|
getmechanicsData(state){
|
||||||
|
return state.mechanicsData
|
||||||
|
}
|
||||||
|
},
|
||||||
//methods 可同步/异步，提交state
|
//methods 可同步/异步，提交state
|
||||||
//actions内获取state数据使用this
|
//actions内获取state数据使用this
|
||||||
// 使用方式
|
// 使用方式
|
||||||
|
|||||||
163
src/views/Mechanics/components/gateway.vue
Normal file
163
src/views/Mechanics/components/gateway.vue
Normal file
@ -0,0 +1,163 @@
|
|||||||
|
<!--
|
||||||
|
* @FilePath: \code\gitscreenFront\src\views\Mechanics\components\gateway.vue
|
||||||
|
* @Author: 王路平
|
||||||
|
* @文件版本: V1.0.0
|
||||||
|
* @Date: 2023-02-16 11:51:32
|
||||||
|
* @Description:
|
||||||
|
*
|
||||||
|
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="box" :style="{ width: '100%', height: '100%' }">
|
||||||
|
|
||||||
|
<div class="title-box" >
|
||||||
|
<h2>{{ props.title }}</h2>
|
||||||
|
<div class="colorTip">
|
||||||
|
<div><i class="iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan icon-blue"></i> {{t('messages.onLine')}}</div>
|
||||||
|
<div style="color:#e43961"><i class="iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan icon-red"></i>
|
||||||
|
{{t('messages.offline')}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul class="gatewaystatus">
|
||||||
|
<li v-for="item in props.data" @click="clickBotton(item)">
|
||||||
|
<i :class="JSON.parse(item.gateway)
|
||||||
|
? 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan online'
|
||||||
|
: 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan noonline'
|
||||||
|
"></i>
|
||||||
|
<h2 class="titlesize-name">{{ item.title+'车间' }}</h2>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { getCurrentInstance, onMounted, reactive, ref } from "vue";
|
||||||
|
import border13 from "@/components/border/Border13.vue";
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
import { useMechanicsStore } from "@/store/module/Mechanics";
|
||||||
|
import { useRouter } from "vue-router";
|
||||||
|
const router=useRouter()
|
||||||
|
const store = useMechanicsStore();
|
||||||
|
let {t} = useI18n();
|
||||||
|
let props = defineProps<{
|
||||||
|
title: string;
|
||||||
|
data: any
|
||||||
|
}>();
|
||||||
|
const clickBotton=(item:any)=>{
|
||||||
|
store.changePage(item.index)
|
||||||
|
router.push({
|
||||||
|
name:'Mechanicschild',
|
||||||
|
params:{
|
||||||
|
id:item.index
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
onMounted(() => { });
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
h2 {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 20px;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0 10px 0 10px;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gatewaystatus {
|
||||||
|
margin: auto;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gatewaystatus>li {
|
||||||
|
width: 50%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gatewaystatus>li {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.noonline {
|
||||||
|
font-size: 5rem;
|
||||||
|
color: rgb(228, 57, 97);
|
||||||
|
position: relative;
|
||||||
|
/* top: -20px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.online {
|
||||||
|
font-size: 5rem;
|
||||||
|
color: rgb(32, 174, 197);
|
||||||
|
position: relative;
|
||||||
|
/* top: -20px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.colorTip {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.colorTip span {
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.colorTip>div {
|
||||||
|
margin-right: 1rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.colorTip .icon-red {
|
||||||
|
display: inline-block;
|
||||||
|
/* background-color: #e43961; */
|
||||||
|
/* border-radius: 1rem; */
|
||||||
|
color: #e43961;
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.colorTip .icon-blue {
|
||||||
|
display: inline-block;
|
||||||
|
/* background-color: #20aec5; */
|
||||||
|
/* border-radius: 1rem; */
|
||||||
|
color: #20aec5;
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.titlesize-name {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-box {
|
||||||
|
padding: 10px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
104
src/views/Mechanics/components/scrollBoard.vue
Normal file
104
src/views/Mechanics/components/scrollBoard.vue
Normal file
@ -0,0 +1,104 @@
|
|||||||
|
<!--
|
||||||
|
* @FilePath: \code\gitscreenFront\src\views\Mechanics\components\scrollBoard.vue
|
||||||
|
* @Author: 王路平
|
||||||
|
* @文件版本: V1.0.0
|
||||||
|
* @Date: 2023-06-13 08:33:37
|
||||||
|
* @Description:
|
||||||
|
*
|
||||||
|
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="box">
|
||||||
|
<div class="box-title">{{t('messages.LegionDevList')}}</div>
|
||||||
|
<div class="box-body">
|
||||||
|
<dv-scroll-board ref="devList" :config="prop.config" @mouseover="dvMouseover" @mouseend="dvmouseleave" :style="{
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
}" />
|
||||||
|
<el-tooltip v-model:visible="visible" :content="tipcontent" placement="top" effect="light" trigger="click" popper-class="tooltip-class"
|
||||||
|
virtual-triggering :virtual-ref="triggerRef" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang='ts'>
|
||||||
|
import { getCurrentInstance, onMounted, reactive, ref } from "vue";
|
||||||
|
import { devListType } from "@/type/InPlantProducts";
|
||||||
|
import { useRouter } from "vue-router"
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
let {t} = useI18n();
|
||||||
|
const prop = defineProps({
|
||||||
|
config: Object,
|
||||||
|
})
|
||||||
|
const router = useRouter()
|
||||||
|
//弹窗文本
|
||||||
|
let tipcontent = ref(null)
|
||||||
|
//弹窗显示与隐藏
|
||||||
|
let visible = ref(false)
|
||||||
|
//存储弹窗dom
|
||||||
|
let triggerRef = ref(null)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @函数功能: 鼠标移入组件方法
|
||||||
|
* @param {*} value
|
||||||
|
* @出口参数:
|
||||||
|
* @函数备注:
|
||||||
|
*/
|
||||||
|
const dvMouseover = (value) => {
|
||||||
|
if (value.toElement && value.toElement.innerHTML&&value.toElement.className == 'ceil') {
|
||||||
|
triggerRef.value = value.toElement
|
||||||
|
tipcontent.value = value.toElement.innerText
|
||||||
|
visible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* @函数功能: 鼠标移出组件方法
|
||||||
|
* @出口参数:
|
||||||
|
* @函数备注:
|
||||||
|
*/
|
||||||
|
const dvmouseleave = () => {
|
||||||
|
triggerRef.value = null
|
||||||
|
tipcontent.value = null
|
||||||
|
visible.value = false
|
||||||
|
};
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.box {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-title {
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-body {
|
||||||
|
width: 100%;
|
||||||
|
height: 90%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.dv-scroll-board .rows .ceil) {
|
||||||
|
overflow: auto;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
text-overflow: none
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style>
|
||||||
|
.el-popper.tooltip-class{
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
299
src/views/Mechanics/indexNew.vue
Normal file
299
src/views/Mechanics/indexNew.vue
Normal file
@ -0,0 +1,299 @@
|
|||||||
|
<template>
|
||||||
|
<div :class="$style['container']">
|
||||||
|
<div class="header">
|
||||||
|
<div class="title">
|
||||||
|
<header2
|
||||||
|
ref="headerref"
|
||||||
|
:width="'100%'"
|
||||||
|
:height="'100px'"
|
||||||
|
:title="t('messages.Mechanics')"
|
||||||
|
:titleTip="[]"
|
||||||
|
:typeFun="['AbnormalData', 'time']"
|
||||||
|
:alarmType="['machinefactory']"
|
||||||
|
>
|
||||||
|
</header2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content" ref="Acontent">
|
||||||
|
<el-row class="layout" :gutter="20">
|
||||||
|
<el-col :span="7" class="flex-left">
|
||||||
|
<div style="width: 100%; height: 68%;">
|
||||||
|
<border13>
|
||||||
|
<div style="width: 100%;height: 100%;">
|
||||||
|
<h2 class="module-header">设备总览</h2>
|
||||||
|
<div class="module-content">
|
||||||
|
<DevOverview :title="'设备总数'" :value="[112]"></DevOverview>
|
||||||
|
<DevOverview :title="'车间1'" :value="[null,12,12]"></DevOverview>
|
||||||
|
<DevOverview :title="'车间2'" :value="[null,12,12]"></DevOverview>
|
||||||
|
<DevOverview :title="'车间3'" :value="[null,12,12]"></DevOverview>
|
||||||
|
<DevOverview :title="'车间4'" :value="[null,12,12]"></DevOverview>
|
||||||
|
<DevOverview :title="'车间5'" :value="[null,12,12]"></DevOverview>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</border13>
|
||||||
|
</div>
|
||||||
|
<div style="width: 100%; height: 28%;">
|
||||||
|
<border13>
|
||||||
|
<div style="width: 98%;height: 100%;">
|
||||||
|
<devFaultTip :title="'设备故障提醒'" :tipList="devFaultTipData"></devFaultTip>
|
||||||
|
</div>
|
||||||
|
</border13>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="10" class="flex-left">
|
||||||
|
<div style="width: 100%; height: 18%;">
|
||||||
|
<gateway :title="'物联网关状态'" :data="gatewayData"></gateway>
|
||||||
|
</div>
|
||||||
|
<div style="width: 100%; height: 78%;">
|
||||||
|
<border13>
|
||||||
|
<scrollBoard :config="scrollBoardConfig"></scrollBoard>
|
||||||
|
</border13>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="7" class="flex-left">
|
||||||
|
<div style="width: 100%; height: 48%;">
|
||||||
|
<border13>
|
||||||
|
<ringChart :data="ringData"></ringChart>
|
||||||
|
</border13>
|
||||||
|
</div>
|
||||||
|
<div style="width: 100%; height: 48%;">
|
||||||
|
<border13>
|
||||||
|
<div style="width: 100%;height: 100%;">
|
||||||
|
<devStatusTip :title="'设备状态累积时长'" :tipList="devStatusTipData"></devStatusTip>
|
||||||
|
</div>
|
||||||
|
</border13>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { nextTick, onMounted, onUnmounted, reactive, ref } from "vue";
|
||||||
|
import header2 from "@/components/headerBox/header2.vue";
|
||||||
|
import border13 from '@/components/border/Border13.vue'
|
||||||
|
import DevOverview from "./components/DevOverview.vue";
|
||||||
|
import devFaultTip from "./components/devFaultTip.vue";
|
||||||
|
import devStatusTip from "./components/devStatusTip.vue";
|
||||||
|
import ringChart from "./components/ringChart.vue";
|
||||||
|
import scrollBoard from "./components/scrollBoard.vue";
|
||||||
|
import gateway from "./components/gateway.vue";
|
||||||
|
import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
|
||||||
|
import { ElRow, ElCol } from "element-plus";
|
||||||
|
import { gatcountsOfMachineryFactoryInStatusTime } from "@/http/Mechanics";
|
||||||
|
import { useMechanicsStore } from "@/store/module/Mechanics";
|
||||||
|
import { gatewayOfMachineryFactory,gatcountsOfMachineryFactory } from "@/http/Mechanics";
|
||||||
|
import { useI18n } from "vue-i18n";
|
||||||
|
let { t } = useI18n();
|
||||||
|
const store = useMechanicsStore();
|
||||||
|
|
||||||
|
let Acontent = ref();
|
||||||
|
let headerref = ref();
|
||||||
|
|
||||||
|
let DevOverviewData=ref([])
|
||||||
|
let devFaultTipData=ref([])
|
||||||
|
let devStatusTipData=ref([])
|
||||||
|
let ringData=ref([])
|
||||||
|
let scrollBoardConfig = reactive({
|
||||||
|
header: ['序号', '机架号', '设备名称', '所属车间','设备状态','稼动率', '故障率'],
|
||||||
|
headerBGC: 'rgb(52, 105, 243)',
|
||||||
|
oddRowBGC: '#100c2a',
|
||||||
|
evenRowBGC: '#100c2a',
|
||||||
|
rowNum: 10,
|
||||||
|
columnWidth: [80, 170, 120, 120, 120, 120, 120],
|
||||||
|
align: ['center', 'center', 'center', 'center', 'center', 'center', 'center'],
|
||||||
|
data: []
|
||||||
|
})
|
||||||
|
let gatewayData=ref([])
|
||||||
|
|
||||||
|
|
||||||
|
function getWebsocket(val) {
|
||||||
|
headerref.value.HeadergetWebsocket(val);
|
||||||
|
try {
|
||||||
|
let data = JSON.parse(val);
|
||||||
|
|
||||||
|
if (data.type == "CountsOfMachineryFactoryInStatusTime") {
|
||||||
|
store.changedevstatus(data.msg);
|
||||||
|
}
|
||||||
|
if (data.type == "gatewayMF") {
|
||||||
|
store.changegateway(data.msg);
|
||||||
|
gatewayData.value=store.getmechanicsData
|
||||||
|
store.changegatewaynum(data.msg);
|
||||||
|
// store.changePM(data.msg)
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.log(err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function errWebsocket(val) {
|
||||||
|
headerref.value ? headerref.value.HeadererrWebsocket(val) : "";
|
||||||
|
// console.log(val);
|
||||||
|
}
|
||||||
|
async function gatewayOfMachineryFactoryfun(){
|
||||||
|
let result:any = await gatewayOfMachineryFactory()
|
||||||
|
|
||||||
|
if(result.code==200){
|
||||||
|
store.changegateway(result.data)
|
||||||
|
gatewayData.value=store.getmechanicsData
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
async function gatcountsOfMachineryFactoryfun(){
|
||||||
|
let result:any = await gatcountsOfMachineryFactory()
|
||||||
|
|
||||||
|
if(result.code==200){
|
||||||
|
store.changegatewaynum(result.data)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
// let Timedombox=Timedom.value
|
||||||
|
window.document.title = t("messages.Mechanics");
|
||||||
|
setTimeout(()=>{
|
||||||
|
DevOverviewData.value=[{title:'车间',value:[1,2,3]}]
|
||||||
|
devFaultTipData.value=[{label:'111111',devName:'富怡精密绣花机' ,status:'故障'},
|
||||||
|
{label:'222222',devName:'富怡精密绣花机' ,status:'故障'},
|
||||||
|
{label:'333333',devName:'富怡精密绣花机' ,status:'故障'},
|
||||||
|
{label:'444444',devName:'富怡精密绣花机' ,status:'故障'},
|
||||||
|
{label:'555555',devName:'富怡精密绣花机' ,status:'故障'},
|
||||||
|
{label:'666666',devName:'富怡精密绣花机' ,status:'故障'},
|
||||||
|
{label:'777777',devName:'富怡精密绣花机' ,status:'故障'}]
|
||||||
|
devStatusTipData.value=[{label:'111111',devName:'富怡精密绣花机' ,on:111,off:222,stop:333},
|
||||||
|
{label:'222222',devName:'富怡精密绣花机' ,on:111,off:222,stop:333},
|
||||||
|
{label:'333333',devName:'富怡精密绣花机' ,on:111,off:222,stop:333},
|
||||||
|
{label:'444444',devName:'富怡精密绣花机' ,on:111,off:222,stop:333},
|
||||||
|
{label:'555555',devName:'富怡精密绣花机' ,on:111,off:222,stop:333},
|
||||||
|
{label:'666666',devName:'富怡精密绣花机' ,on:111,off:222,stop:333},
|
||||||
|
{label:'777777',devName:'富怡精密绣花机' ,on:111,off:222,stop:333},{label:'111111',devName:'富怡精密绣花机' ,on:111,off:222,stop:333},
|
||||||
|
{label:'222222',devName:'富怡精密绣花机' ,on:111,off:222,stop:333},
|
||||||
|
{label:'333333',devName:'富怡精密绣花机' ,on:111,off:222,stop:333},
|
||||||
|
{label:'444444',devName:'富怡精密绣花机' ,on:111,off:222,stop:333},
|
||||||
|
{label:'555555',devName:'富怡精密绣花机' ,on:111,off:222,stop:333},
|
||||||
|
{label:'666666',devName:'富怡精密绣花机' ,on:111,off:222,stop:333},
|
||||||
|
{label:'777777',devName:'富怡精密绣花机' ,on:111,off:222,stop:333}]
|
||||||
|
ringData.value=[{
|
||||||
|
value:120,
|
||||||
|
name:'在线',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value:120,
|
||||||
|
name:'离线',
|
||||||
|
}]
|
||||||
|
|
||||||
|
scrollBoardConfig.data=[[1,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
|
||||||
|
[2,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
|
||||||
|
[3,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
|
||||||
|
[4,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
|
||||||
|
[5,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
|
||||||
|
[6,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
|
||||||
|
[7,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
|
||||||
|
[8,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
|
||||||
|
[9,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
|
||||||
|
[10,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
|
||||||
|
[11,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
|
||||||
|
[12,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
|
||||||
|
[13,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
|
||||||
|
[14,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
|
||||||
|
[15,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
|
||||||
|
[16,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
|
||||||
|
[17,111111,'富怡绣花机123145','机加车间','在线','95%','1%']]
|
||||||
|
// gatewayData.value=[{
|
||||||
|
// name:'机加车间',
|
||||||
|
// status:'false'
|
||||||
|
// },{
|
||||||
|
// name:'焊接车间',
|
||||||
|
// status:'false'
|
||||||
|
// },{
|
||||||
|
// name:'大件车间',
|
||||||
|
// status:'false'
|
||||||
|
// },{
|
||||||
|
// name:'精饰车间',
|
||||||
|
// status:'false'
|
||||||
|
// },{
|
||||||
|
// name:'精加车间',
|
||||||
|
// status:'false'
|
||||||
|
// },]
|
||||||
|
},1000)
|
||||||
|
|
||||||
|
gatewayOfMachineryFactoryfun()
|
||||||
|
gatcountsOfMachineryFactoryfun()
|
||||||
|
connectWebsocket(null, null, getWebsocket, errWebsocket);
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
closeWebsocket();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style module>
|
||||||
|
.container {
|
||||||
|
height: 1080px;
|
||||||
|
width: 1920px;
|
||||||
|
color: #20aec5;
|
||||||
|
background-color: #100c2a;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.title {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.title > h1 {
|
||||||
|
font-size: 30px;
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.header p {
|
||||||
|
position: absolute;
|
||||||
|
right: 50px;
|
||||||
|
bottom: 20px;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
.module-header{
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 20px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.module-content{
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
height: 98%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.layout {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.flex-left{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
width: 100%;
|
||||||
|
--header: 100px;
|
||||||
|
height: calc(1080px - var(--header));
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
/* --content:calc(100vh - var(--header)) */
|
||||||
|
overflow: hidden !important;
|
||||||
|
-ms-overflow-style: none; /* IE + Edge */
|
||||||
|
scrollbar-width: none; /* Firefox */
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user