update
This commit is contained in:
hzz
parent
01b53f3c4d
commit
fb1431d1e3
131
src/views/MicroExhibition/component/BottomBorder.vue
Normal file
131
src/views/MicroExhibition/component/BottomBorder.vue
Normal file
@ -0,0 +1,131 @@
|
||||
<!--
|
||||
* @Author: hzz hzz
|
||||
* @Date: 2023-12-06 09:29:01
|
||||
* @LastEditors: hzz hzz
|
||||
* @LastEditTime: 2023-12-06 13:43:37
|
||||
* @FilePath: \screenFront\src\views\MicroExhibition\component\BottomBorder.vue
|
||||
* @Description:
|
||||
*
|
||||
* Copyright (c) 2023 by ${hzz}, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
<div class="rbottom-container">
|
||||
<div class="rbottom-title">后整设备</div>
|
||||
<div class="rbottom-content">
|
||||
<div class="rbottom-bg" v-for="i in 5">
|
||||
<div class="dev-name">自动烫裤机</div>
|
||||
<div class="dev-progress">
|
||||
<div class="ele-progress">
|
||||
<el-progress :percentage="50" :show-text="false" :stroke-width="13">
|
||||
</el-progress>
|
||||
</div>
|
||||
|
||||
<div>50%</div>
|
||||
</div>
|
||||
<div class="dev-status">
|
||||
<div class="status1">编号：2</div>
|
||||
<div class="status2">状态：运行</div>
|
||||
</div>
|
||||
<div class="dev-status">
|
||||
工作时长：2小时
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.rbottom-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.rbottom-title {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-left: 20px;
|
||||
text-align: left;
|
||||
font-size: 28px;
|
||||
font-family: "华文新魏", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
color: #00fffffe;
|
||||
}
|
||||
|
||||
.rbottom-content {
|
||||
width: 100%;
|
||||
height: 225px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.rbottom-bg {
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
background: url('./../images/bottom_border1.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #AEEEFAFE;
|
||||
font-family: "微软雅黑 Bold", "微软雅黑", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
}
|
||||
.dev-name {
|
||||
width: 100%;
|
||||
height: 25%;
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.dev-progress {
|
||||
width: 100%;
|
||||
height: 25%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
.ele-progress {
|
||||
width: 80% !important;
|
||||
}
|
||||
|
||||
.dev-status {
|
||||
width: 100%;
|
||||
height: 25%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.status1 {
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.status2 {
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
74
src/views/MicroExhibition/component/ScrollBoard.vue
Normal file
74
src/views/MicroExhibition/component/ScrollBoard.vue
Normal file
@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<div class="ScrollBoard-container">
|
||||
<ZdScrollBoard ref="devList" class="dev-list" :config="config" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { reactive, ref, watch } from "vue";
|
||||
import ZdScrollBoard from "@/components/data-view/index.vue";
|
||||
const prop = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: {
|
||||
list:[],
|
||||
rowNum: 3,
|
||||
}
|
||||
}
|
||||
})
|
||||
const devList = ref(null);
|
||||
let config = reactive({
|
||||
header: [
|
||||
'<span style="color:#AEEEFAFE;font-size:18px;">序号</span>',
|
||||
'<span style="color:#AEEEFAFE;font-size:18px;">设备名称</span>',
|
||||
'<span style="color:#AEEEFAFE;font-size:18px;">编号</span>',
|
||||
'<span style="color:#AEEEFAFE;font-size:18px;">状态</span>',
|
||||
'<span style="color:#AEEEFAFE;font-size:18px;">稼动率</span>',
|
||||
'<span style="color:#AEEEFAFE;font-size:18px;">工作时长</span>',
|
||||
],//, '故障率'
|
||||
headerBGC: 'rgba(0, 11, 18, 1)',
|
||||
oddRowBGC: '#000F1D',
|
||||
evenRowBGC: '#000F1D',
|
||||
wrap: [false, false, false, false, false],
|
||||
columnWidth: [80, 240, 85, 80, 110,145],
|
||||
align: ['center', 'center', 'center', 'center', 'center', 'center'],
|
||||
rowNum: prop.data.rowNum,
|
||||
waitTime: 3000,
|
||||
})
|
||||
const handleData = () => {
|
||||
|
||||
let updateList = prop.data.list.map((items: any) => {
|
||||
return items.map((item: any, index: number) => {
|
||||
if (index == (items.length - 3)) {
|
||||
return statusHtml(status_color[item])
|
||||
}
|
||||
return item
|
||||
})
|
||||
})
|
||||
devList.value.updateRows(updateList,config)
|
||||
}
|
||||
watch(()=>prop.data, (newVal, oldVal) => {
|
||||
|
||||
handleData()
|
||||
},{deep:true}
|
||||
)
|
||||
const status_color = {
|
||||
'0': '#FF6E76',
|
||||
'1': '#FDDD60',
|
||||
'2': '#7CFFB2',
|
||||
'3': '#FDDD60',
|
||||
}
|
||||
let statusHtml = (color) => {
|
||||
return `<div style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;"><div style="width:24px;height:24px;border-radius: 50%;background-color:${color}"></div></div>`
|
||||
// return `<div style="display: inline-block;width:20px;height:20px;border-radius: 50%;background-color:${color}"></div>`
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ScrollBoard-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
71
src/views/MicroExhibition/component/StepItem.vue
Normal file
71
src/views/MicroExhibition/component/StepItem.vue
Normal file
@ -0,0 +1,71 @@
|
||||
<!--
|
||||
* @Author: hzz hzz
|
||||
* @Date: 2023-12-06 08:05:31
|
||||
* @LastEditors: hzz hzz
|
||||
* @LastEditTime: 2023-12-06 08:28:40
|
||||
* @FilePath: \screenFront\src\views\MicroExhibition\component\StepItem.vue
|
||||
* @Description:
|
||||
*
|
||||
* Copyright (c) 2023 by ${hzz}, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
<div class="stepContainer">
|
||||
<div class="step-top">{{ prop.data.name }}</div>
|
||||
<div class="step-bottom">
|
||||
<div class="step-total">总数：{{ prop.data.total }}台</div>
|
||||
<div class="step-online">在线：{{ prop.data.total }}台</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
const prop = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: {
|
||||
name: '裁剪',
|
||||
total: 0,
|
||||
online: 0,
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.stepContainer {
|
||||
width: 170px;
|
||||
height: 88px;
|
||||
background: url('./../images/step_item.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
font-family: "华文新魏", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.step-top {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
color: #00FFFF;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.step-bottom {
|
||||
width: 100%;
|
||||
height: 51px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.step-online {
|
||||
color: #7CFfB2FE;
|
||||
}
|
||||
</style>
|
||||
BIN
src/views/MicroExhibition/images/bottom_border.png
Normal file
BIN
src/views/MicroExhibition/images/bottom_border.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
src/views/MicroExhibition/images/bottom_border1.png
Normal file
BIN
src/views/MicroExhibition/images/bottom_border1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
src/views/MicroExhibition/images/step_item.png
Normal file
BIN
src/views/MicroExhibition/images/step_item.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
@ -2,7 +2,7 @@
|
||||
* @Author: hzz hzz
|
||||
* @Date: 2023-12-05 13:30:45
|
||||
* @LastEditors: hzz hzz
|
||||
* @LastEditTime: 2023-12-05 16:54:15
|
||||
* @LastEditTime: 2023-12-06 15:17:05
|
||||
* @FilePath: \screenFront\src\views\MicroExhibition\index.vue
|
||||
* @Description:
|
||||
*
|
||||
@ -12,7 +12,7 @@
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<Header :title="'富怡服装微工厂物联管理平台'" :wh="{ width: '100%', height: '100px'}"></Header>
|
||||
<Header :title="'富怡服装微工厂物联管理平台'" :wh="{ width: '100%', height: '100px' }"></Header>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
@ -21,45 +21,75 @@
|
||||
<BoardVue :title="'裁剪设备'"></BoardVue>
|
||||
</div>
|
||||
<div class="lbottom">
|
||||
<BoardVue :title="'缝前设备'"></BoardVue>
|
||||
<BoardVue :title="'缝前设备'">
|
||||
<ScrollBoard :data="fqdata"></ScrollBoard>
|
||||
</BoardVue>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="rtop">
|
||||
<div class="rtleft">
|
||||
<div class="rtltop"></div>
|
||||
<div class="rtlbottom"></div>
|
||||
<div class="rtltop">
|
||||
<StepItem v-for="i in 4"></StepItem>
|
||||
</div>
|
||||
<div class="rtlbottom">
|
||||
<video controls loop autoplay="true" width="777">
|
||||
<source src="https://tjgoa.oss-cn-beijing.aliyuncs.com/20230914%E5%BE%AE%E5%B7%A5%E5%8E%82%E5%AE%A3%E4%BC%A0%E8%A7%86%E9%A2%91%E4%BA%8E%E6%89%BF%E5%BF%97.mp4"
|
||||
type="video/mp4" />
|
||||
</video>
|
||||
<!-- <video class="video"
|
||||
src="https://tjgoa.oss-cn-beijing.aliyuncs.com/20230914%E5%BE%AE%E5%B7%A5%E5%8E%82%E5%AE%A3%E4%BC%A0%E8%A7%86%E9%A2%91%E4%BA%8E%E6%89%BF%E5%BF%97.mp4"
|
||||
autoplay></video> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="rtright">
|
||||
<BoardVue :title="'缝中设备'"></BoardVue>
|
||||
<BoardVue :title="'缝中设备'">
|
||||
<ScrollBoard :data="fzdata"></ScrollBoard>
|
||||
</BoardVue>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rbottom">
|
||||
右下
|
||||
<BottomBorder></BottomBorder>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import Header from './component/Header.vue'
|
||||
import BoardVue from './component/Border.vue'
|
||||
import StepItem from './component/StepItem.vue'
|
||||
import BottomBorder from './component/BottomBorder.vue'
|
||||
import ScrollBoard from './component/ScrollBoard.vue'
|
||||
|
||||
import { ref, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated, computed } from 'vue'
|
||||
import { ref, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated, computed, reactive } 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 timer = null
|
||||
let dev_caijian_title = ['设备名称', '编号','状态', '稼动率', '工作时长']
|
||||
|
||||
|
||||
|
||||
let fqdata = ref({
|
||||
list: [],
|
||||
rowNum: 3,
|
||||
})
|
||||
let fzdata = ref({
|
||||
list: [],
|
||||
rowNum: 10,
|
||||
})
|
||||
let listdata = reactive([])
|
||||
let list = [
|
||||
[1, '自动缝纫机', 29, 1, '95%', '12min'],
|
||||
[1, '自动缝纫机', 29, 1, '95%', '12min'],
|
||||
[1, '自动缝纫机', 29, 1, '95%', '12min'],
|
||||
[1, '自动缝纫机', 29, 1, '95%', '12min'],
|
||||
[1, '自动缝纫机', 29, 1, '95%', '12min'],]
|
||||
setTimeout(() => {
|
||||
fqdata.value.list.push(...list)
|
||||
fzdata.value.list.push(...[...list, ...list, ...list])
|
||||
}, 1000);
|
||||
|
||||
|
||||
|
||||
@ -131,6 +161,7 @@ onUnmounted(() => {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ltop {
|
||||
width: 100%;
|
||||
height: 630px;
|
||||
@ -163,7 +194,6 @@ onUnmounted(() => {
|
||||
.rbottom {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
background: #bfe;
|
||||
}
|
||||
|
||||
.rtleft {
|
||||
@ -178,23 +208,33 @@ onUnmounted(() => {
|
||||
.rtltop {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
background: #bff;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.rtlbottom {
|
||||
width: 100%;
|
||||
height: 580px;
|
||||
background: #bf1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* background-image: url('./images/border.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 10px; */
|
||||
}
|
||||
|
||||
.rtlbottom .video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: fill;
|
||||
}
|
||||
|
||||
.rtright {
|
||||
width: 540px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user