170 lines
3.4 KiB
Vue
170 lines
3.4 KiB
Vue
<!--
|
|
* @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>
|
|
<DecorationFadeOut>
|
|
{{ props.title }}
|
|
</DecorationFadeOut>
|
|
</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";
|
|
import DecorationFadeOut from "@/components/decoration/DecorationFadeOut.vue";
|
|
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>
|