update
This commit is contained in:
hzz
parent
c11465e915
commit
bd0c7beb1b
@ -300,6 +300,16 @@ const routes: Array<RouteRecordRaw> = [
|
||||
name: "CIFMExhibition",
|
||||
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",
|
||||
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