update
This commit is contained in:
hzz
parent
c11465e915
commit
bd0c7beb1b
@ -300,6 +300,16 @@ const routes: Array<RouteRecordRaw> = [
|
|||||||
name: "CIFMExhibition",
|
name: "CIFMExhibition",
|
||||||
component: () => import("../views/Exhibition/CIFM/index.vue"),
|
component: () => import("../views/Exhibition/CIFM/index.vue"),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/CIFMExhibitionMain",
|
||||||
|
name: "CIFMExhibitionMain",
|
||||||
|
component: () => import("../views/Exhibition/CIFM/main.vue"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/CIFMExhibitionMain_:id",
|
||||||
|
name: "CIFMExhibitionMainChild",
|
||||||
|
component: () => import("../views/Exhibition/CIFM/child.vue"),
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: "/ExhibitionTable_:id",
|
path: "/ExhibitionTable_:id",
|
||||||
name: "ExhibitionTable",
|
name: "ExhibitionTable",
|
||||||
|
|||||||
108
src/views/Exhibition/CIFM/child.vue
Normal file
108
src/views/Exhibition/CIFM/child.vue
Normal file
@ -0,0 +1,108 @@
|
|||||||
|
<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>
|
||||||
|
<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'>
|
||||||
|
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated, computed } from 'vue'
|
||||||
|
import header2 from './components/header2.vue'
|
||||||
|
import BorderView from './components/Border.vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.container {
|
||||||
|
height: 1080px;
|
||||||
|
width: 1920px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
background: url('./../../../assets/img/bg.jpg') no-repeat center center / 100% 100%;
|
||||||
|
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-tip-type {
|
||||||
|
position: absolute;
|
||||||
|
top: 50px;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
86
src/views/Exhibition/CIFM/components/Border.vue
Normal file
86
src/views/Exhibition/CIFM/components/Border.vue
Normal file
@ -0,0 +1,86 @@
|
|||||||
|
<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;
|
||||||
|
align-items: center;
|
||||||
|
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-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 30px;
|
||||||
|
color: rgba(0, 255, 255, 0.996078431372549);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
.hr {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0px;
|
||||||
|
left: 0px;
|
||||||
|
width: 100%;
|
||||||
|
height: 4px;
|
||||||
|
background: url(./../images/hr.png) no-repeat;
|
||||||
|
background-position: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-text {
|
||||||
|
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.newboder-content {
|
||||||
|
width: 100%;
|
||||||
|
height: 84%;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
99
src/views/Exhibition/CIFM/components/ItemCard.vue
Normal file
99
src/views/Exhibition/CIFM/components/ItemCard.vue
Normal file
@ -0,0 +1,99 @@
|
|||||||
|
<template>
|
||||||
|
<div class="item-card-container">
|
||||||
|
<div class="box-top">
|
||||||
|
<div class="top-item" v-for="(item, index) in mjxhj_data">
|
||||||
|
<span class="key-text">{{ item.key }}:</span>
|
||||||
|
<span class="value-text" :class="{ status: index == 1 }"
|
||||||
|
:style="{ background: index == 1 ? status_color[item.value] : '' }">{{ index ==
|
||||||
|
1 ? '' : item.value }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="box-bottom">
|
||||||
|
<img src="./../images/mjxhj.png" alt="">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang='ts'>
|
||||||
|
|
||||||
|
const prop = defineProps({
|
||||||
|
mjxhj_data: {
|
||||||
|
type: Array as any,
|
||||||
|
default: () => []
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const status_color = {
|
||||||
|
'0': '#FF6E76',
|
||||||
|
'1': '#FDDD60',
|
||||||
|
'2': '#7CFFB2',
|
||||||
|
'3': '#FDDD60',
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.item-card-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
}
|
||||||
|
.box-top {
|
||||||
|
width: 100%;
|
||||||
|
height: 123px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-bottom {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 123px);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-bottom img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.top-item {
|
||||||
|
width: 33%;
|
||||||
|
height: 50%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
.key-text {
|
||||||
|
width: 60%;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #02c1d7;
|
||||||
|
font-weight: 700;
|
||||||
|
/* font-family: '华文新魏', sans-serif; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.value-text {
|
||||||
|
width: 40%;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #AEEEFAFE;
|
||||||
|
font-family: '华文新魏', sans-serif;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
BIN
src/views/Exhibition/CIFM/images/border.png
Normal file
BIN
src/views/Exhibition/CIFM/images/border.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
BIN
src/views/Exhibition/CIFM/images/hr.png
Normal file
BIN
src/views/Exhibition/CIFM/images/hr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
BIN
src/views/Exhibition/CIFM/images/mjxhj.png
Normal file
BIN
src/views/Exhibition/CIFM/images/mjxhj.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 294 KiB |
185
src/views/Exhibition/CIFM/main.vue
Normal file
185
src/views/Exhibition/CIFM/main.vue
Normal file
@ -0,0 +1,185 @@
|
|||||||
|
<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">
|
||||||
|
<BorderView :title="'床垫材料缝制设备'">
|
||||||
|
<ItemCard :mjxhj_data="mjxhj_data"></ItemCard>
|
||||||
|
</BorderView>
|
||||||
|
</div>
|
||||||
|
<div class="center">
|
||||||
|
<div class="cc">
|
||||||
|
<BorderView :title="'设备状态总览'">
|
||||||
|
<ItemCard :mjxhj_data="mjxhj_data"></ItemCard>
|
||||||
|
</BorderView>
|
||||||
|
</div>
|
||||||
|
<div class="cb">
|
||||||
|
<BorderView :title="'床垫包装设备'">
|
||||||
|
<ItemCard :mjxhj_data="mjxhj_data"></ItemCard>
|
||||||
|
</BorderView>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<BorderView :title="'床垫生产线设备'">
|
||||||
|
</BorderView>
|
||||||
|
</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>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang='ts'>
|
||||||
|
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated, computed } from 'vue'
|
||||||
|
import header2 from './components/header2.vue'
|
||||||
|
import BorderView from './components/Border.vue'
|
||||||
|
import ItemCard from './components/ItemCard.vue'
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
let mjxhj_data = reactive([
|
||||||
|
{ key: '机架号', value: '102014422' },
|
||||||
|
{ key: '设备状态', value: 2 },
|
||||||
|
{ key: '稼动率', value: '90%' },
|
||||||
|
{ key: '工作时长', value: '0min' },
|
||||||
|
])
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.container {
|
||||||
|
height: 1080px;
|
||||||
|
width: 1920px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
background: url('./../../../assets/img/bg.jpg') no-repeat center center / 100% 100%;
|
||||||
|
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: 560px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center {
|
||||||
|
width: 750px;
|
||||||
|
height: 980px;
|
||||||
|
margin: 0 20px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cc {
|
||||||
|
width: 100%;
|
||||||
|
height: 440px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cb {
|
||||||
|
width: 100%;
|
||||||
|
height: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
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: 50px;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user