hanzhengzheng/screenFront
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

展会大屏更新

Browse Source
This commit is contained in:
hzz 2023-09-08 16:03:33 +08:00
parent d4bb2a5508
commit a6a0833fdb
7 changed files with 368 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/store/module/MicroExhibition.ts
View File

@ -20,7 +20,52 @@ export const useMicroExhibitionStore = defineStore(Names.MicroExhibition, {
state: () => {
return {
devlist: [],
devnum: {all: 5, wait: 1, off: 3, on: 0}
devnum: { all: 17, wait: 1, off: 3, on: 0 },
caijian: {
'value': [ //'设备名称', '设备编码', '稼动率', '状态' //0:停机 1:待机 2:工作 3:待机
['全自动针梭两用铺布机', '1050910', '95%', '0'],
['全自动9公分电脑裁床', '1190269', '80%', '1'],
],
'chart': {
xData: ['1050910', '1050269'],
series: [
{
name: '计划完成',
data: [120, 200],
type: 'bar',
barMaxWidth: 30,
},
{
name: '实际完成',
data: [130, 180],
type: 'bar',
barMaxWidth: 30,
}
]
}
},
tuoxie: {
'value': [ //'设备名称', '设备编码', '稼动率', '状态' //0:停机 1:待机 2:工作 3:待机
['1050910', '95%', '2'],
],
'chart': {
xData: ['1050910'],
series: [
{
name: '计划完成',
data: [120],
type: 'bar',
barMaxWidth: 45,
},
{
name: '实际完成',
data: [130],
type: 'bar',
barMaxWidth: 45,
}
]
}
}
};
},
//computed 修改一些值
@ -30,10 +75,10 @@ export const useMicroExhibitionStore = defineStore(Names.MicroExhibition, {
getters: {},
actions: {
setDevlist(data) {
this.devlist = data;
this.devlist = data;
},
setDevnum(data) {
this.devnum = data;
this.devnum = data;
}
},
});

46
src/views/MicroExhibition/components/BarChart.vue
View File

@ -1,14 +1,32 @@
<template>
<div ref="LChartRef"></div>
<div ref="LChartRef" class="cc"></div>
</template>
<script setup lang='ts'>
import { ref, getCurrentInstance, onMounted } from 'vue'
import { ref, getCurrentInstance, onMounted,watch } from 'vue'
const prop = defineProps({
xData: {
type: Array,
default: ['1050910', '1050269']
},
seriesData: {
type: Array,
default: [
{
name:'计划完成',
data: [120, 200],
type: 'bar',
barMaxWidth: 30,
},
{
name:'实际完成',
data: [130, 180],
type: 'bar',
barMaxWidth: 30,
}
]
}
})
@ -25,6 +43,7 @@ const setCharts = () => {
legend: {
data: ['计划完成','实际完成']
},
color:['#2FC5D4','#FEDA81'],
xAxis: {
type: 'category',
data: prop.xData,
@ -36,22 +55,17 @@ const setCharts = () => {
yAxis: {
type: 'value'
},
series: [
{
name:'计划完成',
data: [120, 200],
type: 'bar'
},
{
name:'实际完成',
data: [130, 180],
type: 'bar'
}
]
series: prop.seriesData
};
charts.setOption(option);
}
watch(()=>prop.seriesData, (newVal, oldVal) => {
charts.setOption({
series: newVal
});
},{deep:true})
onMounted(() => {
setCharts()
})
@ -59,7 +73,7 @@ onMounted(() => {
<style scoped>
.cc {
width: 400px;
height: 400px;
width: 100%;
height: 100%;
}
</style>

137
src/views/MicroExhibition/components/BoardBar.vue Normal file
View File

@ -0,0 +1,137 @@
<template>
<div class="board-bar">
<div class="bb-top">
<div class="dev-title">
<div class="title-item" v-for="(item, index) in header" :style="{ width: computedWidth(columnWidth[index]) }">
<text>{{ item }}</text></div>
</div>
<ZdScrollBoard ref="devList" class="dev-list" :config="config" />
</div>
<div class="bb-bottom">
<BarChart style="width: 100%;height: 100%;"></BarChart>
</div>
</div>
</template>
<script setup lang='ts'>
import ZdScrollBoard from "@/components/data-view/index.vue";
import BarChart from './BarChart.vue'
import { getCurrentInstance, onMounted, reactive, ref, computed, watch } from "vue";
const devList = ref(null);
const prop = defineProps({
data: {
type: Array,
default: [[1, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '0'],
[2, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '1'],
[3, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '2'],
[4, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '1'],
[5, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '3'],
[6, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '1'],
[7, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '2'],
[8, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '1'],
[9, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '0'],
[10, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '3'],]
}
})
let header = ['序号', '设备名称', '设备编码', '稼动率', '状态']
let columnWidth = [90, 290, 140, 120, 120, 120];
let sum = 850;
let computedWidth = (width: number) => {
return width / sum * 100 + '%'
}
let config = reactive({
// header: ['序号', '设备名称', '设备编码', '稼动率', '状态'],//, '故障率'
headerBGC: '#0E0E0E',
oddRowBGC: '#000F1D',
evenRowBGC: '#000F1D',
wrap: [false, false, false, false, false],
columnWidth: [80, 290, 120, 120, 120, 120],
align: ['center', 'center', 'center', 'center', 'center', 'center'],
rowNum: 2,
waitTime: 300000,
data: [
]
})
const handleData = () => {
config.data = prop.data.map((items: any) => {
return items.map((item: any, index: number) => {
if (index == (items.length - 1)) {
return statusHtml(status_color[item])
}
return item
})
})
}
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>`
}
onMounted(() => {
handleData()
})
</script>
<style scoped>
.board-bar {
width: 100%;
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.dev-title {
width: 100%;
height: 50px;
display: flex;
align-items: center;
justify-content: space-between;
}
.title-item {
height: 100%;
box-sizing: border-box;
}
.title-item text {
line-height: 50px;
text-align: center;
font-size: 18px;
font-weight: 700;
color: #fff;
padding: 5px 10px;
background: url(@/assets/img/title_bg.svg) no-repeat center center / 100% 100%;
}
.bb-top {
width: 100%;
height: 35%;
}
.dev-list {
width: 100%;
height: calc(100% - 50px);
}
.bb-bottom {
width: 100%;
height: 65%;
}</style>

27
src/views/MicroExhibition/components/DevCard.vue
View File

@ -9,7 +9,9 @@
<div class="key" v-for="item in dev_title">{{ item }}</div>
</div>
<div class="dev-content" v-for="(items, index) in dev_value">
<div v-for="item in items">{{ item}}</div>
<div v-for="(item,index) in items" :class="{status:index == last_index}"
:style="{background:index == last_index?status_color[item]:''}"
>{{ index == last_index?'':item}}</div>
</div>
</div>
</div>
@ -17,19 +19,29 @@
</template>
<script setup lang='ts'>
import { defineProps, ref } from 'vue'
const prop = defineProps({
dev_title: {
type: Array,
default: ['机架号', '状态', '布料层数', '裁片数量']
},
last_index: {
type: Number,
default: 3
},
dev_value: {
type: [Array],
default: [
[102014422, '待机', '40层', '1000片']
[102014422, '待机', '40层', '0']
]
},
})
const status_color = {
'0':'#FF6E76',
'1':'#FDDD60',
'2':'#7CFFB2',
'3':'#FDDD60',
}
</script>
<style scoped>
@ -90,4 +102,11 @@ const prop = defineProps({
font-weight: 700;
color: #02C1D7;
/* background: url(@/assets/img/title_bg.svg) no-repeat center center / 100% 100%; */
}</style>
}
.status {
width:24px;
height:24px;
border-radius: 50%;
}
</style>

1
src/views/MicroExhibition/components/ringChart.vue
View File

@ -27,6 +27,7 @@ const init = () => {
tooltip: {
trigger: "item",
},
color:['#7CFFB2','#FF6E76','#FDDD60'],
backgroundColor: '#0E0E0E',
legend: {
type: "scroll",

12
src/views/MicroExhibition/images/title_bg.svg Normal file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="68px" height="30px" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="0" y1="15" x2="68" y2="15" id="LinearGradient47">
<stop id="Stop48" stop-color="#0033ff" stop-opacity="0.5294117647058824" offset="0" />
<stop id="Stop49" stop-color="#00ffff" offset="1" />
</linearGradient>
</defs>
<g transform="matrix(1 0 0 1 -910 -863 )">
<path d="M 1 29.80000000000001 L 1 0.19999999999998863 L 60.811428571428486 0.19999999999998863 L 67 7.800000000000012 L 67 29.80000000000001 L 1 29.80000000000001 Z " fill-rule="nonzero" fill="url(#LinearGradient47)" stroke="none" transform="matrix(1 0 0 1 910 863 )" />
</g>
</svg>

134
src/views/MicroExhibition/index.vue
View File

@ -10,13 +10,15 @@
<div class="left">
<div class="lt">
<NewBoder :title="'裁剪设备'">
<DevCard :dev_title="dev_title" :dev_value="dev_value">
<BarChart style="width: 100%;height: 100%;"></BarChart>
<DevCard :dev_title="dev_caijian_title" :dev_value="store.caijian.value" :last_index="3">
<BarChart style="width: 100%;height: 100%;" :xData="store.caijian.chart.xData" :seriesData="store.caijian.chart.series"></BarChart>
</DevCard>
</NewBoder>
</div>
<div class="lb">
<NewBoder :title="'缝中设备'"></NewBoder>
<NewBoder :title="'缝中设备'">
<BoardBar></BoardBar>
</NewBoder>
</div>
</div>
<div class="center">
@ -45,22 +47,49 @@
</div>
<div class="cb">
<NewBoder :title="'板房设备'">
<BoardBar></BoardBar>
</NewBoder>
</div>
</div>
<div class="right">
<div class="rt">
<NewBoder :title="'一次性拖鞋自动生产线'">
<DevCard :dev_title="dev_title" :dev_value="dev_value">
<BarChart style="width: 100%;height: 100%;"></BarChart>
<DevCard :dev_title="dev_tuoxie_title" :dev_value="store.tuoxie.value" :last_index="2">
<BarChart style="width: 100%;height: 100%;" :xData="store.tuoxie.chart.xData" :seriesData="store.tuoxie.chart.series"></BarChart>
</DevCard>
</NewBoder>
</div>
<div class="rb">
<NewBoder :title="'座椅面套生产线'"></NewBoder>
<NewBoder :title="'座椅面套生产线'">
<BoardBar></BoardBar>
</NewBoder>
</div>
</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 class="right-tip-type">
<div class="right-tip-type-item blue">
<div class="iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan gatway"></div>
<div class="left-tip-type-item-text">在线</div>
</div>
<div class="right-tip-type-item err">
<div class="iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan gatway"></div>
<div class="left-tip-type-item-text">离线</div>
</div>
</div>
</div>
</template>
@ -70,6 +99,7 @@ import NewBoder from './components/NewBoder.vue';
import DevCard from "./components/DevCard.vue";
import BarChart from './components/BarChart.vue'
import ringChart from "./components/ringChart.vue";
import BoardBar from "./components/BoardBar.vue";
import { ref, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated } from 'vue'
import { useMicroExhibitionStore } from '@/store/module/MicroExhibition'
@ -84,24 +114,30 @@ ringData.value = [
{ name: '待机', value: 3 },
]
let dev_title = ['设备名称', '设备编码', '稼动率', '状态']
let dev_caijian_title = ['设备名称', '设备编码', '稼动率', '状态']
let dev_tuoxie_title = ['设备编码', '稼动率', '状态']
let dev_value = [
['全自动针梭两用铺布机', '待机', '40层', '1000片'],
['全自动9公分电脑裁床', '待机', '40层', '1000片'],
['全自动针梭两用铺布机', '待机', '40层', '1'],
['全自动9公分电脑裁床', '待机', '40层', '0'],
]
onMounted(() => {
document.getElementById('app').style.backgroundColor = '#0E0E0E'
})
onUnmounted(() => {
document.getElementById('app').style.backgroundColor = '#100c2a'
})
</script>
<style>
#app {
background-color: #0E0E0E;
}
</style>
<style scoped>
.container {
height: 1080px;
width: 1920px;
color: #FFFFFF;
background-color: #0E0E0E;
position: relative;
}
@ -130,7 +166,7 @@ let dev_value = [
}
.center {
flex: 1;
width: 670px;
height: 980px;
margin: 0 20px;
display: flex;
@ -138,12 +174,14 @@ let dev_value = [
justify-content: space-between;
}
.lt,.rt {
.lt,
.rt {
width: 100%;
height: 450px;
}
.lb,.rb {
.lb,
.rb {
width: 100%;
height: 530px;
}
@ -155,10 +193,12 @@ let dev_value = [
flex-direction: row;
justify-content: space-around;
}
.cc {
width: 100%;
height: 350px;
}
.cb {
width: 100%;
height: 500px;
@ -205,4 +245,64 @@ h2 {
color: #797979;
font-size: 3.5rem;
}
.left-tip-type {
position: absolute;
top: 69px;
left: 462px;
width: 160px;
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
}
.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;
}
.right-tip-type {
position: absolute;
top: 15px;
left: 1550px;
width: 120px;
height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
}
.right-tip-type-item {
width: 58px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.gatway {
font-size: 36px;
}
</style>