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

的锅展会大屏update

Browse Source
This commit is contained in:
hzz 2024-04-18 13:38:58 +08:00
parent dae937ac26
commit 24bdc11c81
6 changed files with 132 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/views/Exhibition/Germany/components/BottomCBox.vue
View File

@ -8,16 +8,23 @@
</template>
<script setup lang='ts'>
import { ref, getCurrentInstance } from 'vue'
import { ref, getCurrentInstance,watch } from 'vue'
const { proxy } = getCurrentInstance()
const props = defineProps<{
data: any
}>()
watch(() => props.data, (val) => {
bar_option.value.xAxis.data = val.xAxisData
bar_option.value.series[0].data = val.rate
})
let bar_option = ref({
legend: {
data:[proxy.tLang('messages','稼动率')],
},
xAxis: {
type: 'category',
data: ['104019564#', '1171210#', 'RP2401009', ],
data: props.data?.xAxisData,
axisLabel: {
color: '#AEEEFA',
fontSize: 14
@ -26,6 +33,8 @@ let bar_option = ref({
},
yAxis: {
type: 'value',
min: 0,
max: 100,
name: proxy.tLang('messages','稼动率'),
nameTextStyle: {
color: '#fff',
@ -45,7 +54,7 @@ let bar_option = ref({
},
series: [
{
data: [120, 200, 150],
data: props.data?.rate,
type: 'bar',
showBackground: true,
backgroundStyle: {

15
src/views/Exhibition/Germany/components/BottomLBox.vue
View File

@ -1,10 +1,10 @@
<template>
<div class="bl-box-container">
<div class="box-item pos">{{ tLang('messages', '机架号') }}:
<div>104019564#</div>
<div>{{ props.data?.label }}</div>
</div>
<div class="box-item">{{ tLang('messages', '设备状态') }}:
<div class="status green"></div>
<div class="status" :class="[statusObj[props.data?.workingState]]"></div>
</div>
<div class="box-item">
<div style="text-wrap: nowrap;">{{ tLang('messages', '型号') }}:</div>
@ -19,6 +19,17 @@
<script setup lang='ts'>
import { ref, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
const props = defineProps<{
data: any,
}>()
let statusObj = {
0:'red',
1:'yello',
2:'green',
3:'yello'
}
let lqImg = require('./../images/lq.png');
</script>

48
src/views/Exhibition/Germany/components/BottomRBox.vue
View File

@ -1,13 +1,13 @@
<template>
<div class="br-container">
<div class="card" v-for="item in 2">
<v-chart class="chart-class" :option="pie_option"></v-chart>
<div class="card" v-for="item in props.data">
<v-chart class="chart-class" :option="item.option"></v-chart>
<div class="box-list">
<div class="box-item">{{ tLang('messages', '实际产量') }}：<div></div>
<div class="box-item">{{ tLang('messages', '实际产量') }}：<div>{{ item.production }}</div>
</div>
<div class="box-item">{{ tLang('messages', '计划产量') }}：<div></div>
<div class="box-item">{{ tLang('messages', '计划产量') }}：<div>{{ item.planProduction }}</div>
</div>
<div class="box-item">{{ tLang('messages', '设备名称') }}：<div></div>
<div class="box-item">{{ tLang('messages', '设备名称') }}：<div>{{ item.name }}</div>
</div>
</div>
</div>
@ -18,41 +18,9 @@
<script setup lang='ts'>
import { ref, getCurrentInstance } from "vue"
const { proxy } = getCurrentInstance()
let pie_option = ref({
tooltip: {
trigger: 'item'
},
legend: {
top: '10%',
left: 'center',
textStyle: {
color: "#ffffff",
fontSize: 14,
},
},
series: [
{
name: 'Output',
type: 'pie',
radius: ['80%', '90%'],
center: ['50%', '70%'],
startAngle: 210,
endAngle: 330,
label: {
show: true,
position: 'center',
formatter: `{d}%`,
color: "#fff",
},
data: [
{ value: 28, name: proxy.tLang('messages','未完成') },
{ value: 100, name: proxy.tLang('messages','已完成') },
]
}
]
})
const props = defineProps<{
data: any
}>()
</script>

2
src/views/Exhibition/Germany/components/TopLBox.vue
View File

@ -108,7 +108,7 @@ let gauge_option = ref({
offsetCenter: [0, '35%'],
valueAnimation: true,
formatter: function (value) {
return '{value|' + value.toFixed(0) + '}{unit|rpm/min}';
return '{value|' + value.toFixed(0) + '}{unit|rpm}';
},
rich: {
value: {

26
src/views/Exhibition/Germany/components/TopRBox.vue
View File

@ -1,32 +1,32 @@
<template>
<div class="r-box-container">
<div class="pos-label">
<div class="box-item">{{ tLang('messages', '机架号') }}：<div></div>
<div class="box-item">{{ tLang('messages', '机架号') }}：<div>{{ props.data?.label }}</div>
</div>
</div>
<div class="box-item pos1">
{{ tLang('messages', '设备状态') }}:
<div class="status green"></div>
<div class="status" :class="[statusObj[props.data?.workingState]]"></div>
</div>
<div class="icon-box-item pos2">
<div class="icon-div">
<div class="iconfont icon-caijian"></div>
<div>111</div>
<div>{{ props.data?.in3Count + tLang('messages','次') }}</div>
</div>
<span>{{ tLang('messages', '剪线次数') }}</span>
</div>
<div class="icon-box-item pos3">
<div class="icon-div">
<div class="iconfont icon-jizhenzhenshu"></div>
<div>111</div>
<div>{{ props.data?.in4Count + tLang('messages','次') }}</div>
</div>
<span>{{ tLang('messages', '针数') }}</span>
</div>
<div class="icon-box-item pos4">
<div class="icon-div">
<div class="iconfont icon-zidongtaiyajiao"></div>
<div>111</div>
<div>{{ props.data?.in2Count + tLang('messages','次') }}</div>
</div>
<span>{{ tLang('messages', '压脚次数') }}</span>
</div>
@ -48,6 +48,16 @@ import 'echarts-liquidfill'
const { proxy } = getCurrentInstance()
let gyfrjImg = require('./../images/gyfrj.png');
const props = defineProps<{
data: any,
}>()
let statusObj = {
0:'red',
1:'yello',
2:'green',
3:'yello'
}
let gauge_option = ref({
series: [
{
@ -115,7 +125,7 @@ let gauge_option = ref({
offsetCenter: [0, '35%'],
valueAnimation: true,
formatter: function (value) {
return '{value|' + value.toFixed(0) + '}{unit|rpm/min}';
return '{value|' + value.toFixed(0) + '}{unit|rpm}';
},
rich: {
value: {
@ -132,7 +142,7 @@ let gauge_option = ref({
},
data: [
{
value: 900
value: 1000
}
]
}
@ -181,7 +191,7 @@ let fill_option = ref({
},
formatter: function (params) {
return params.value
return props.data?.consumption;
}
},

72
src/views/Exhibition/Germany/index.vue
View File

@ -32,14 +32,14 @@
</div>
<div class="bottom-center-content">
<BorderView :title="'设备稼动率'">
<BottomCBox></BottomCBox>
<BottomCBox :data="bar"></BottomCBox>
</BorderView>
</div>
<div class="bottom-right-content">
<BorderView :title="'产出进度'">
<BottomRBox></BottomRBox>
<BottomRBox :data="pie"></BottomRBox>
</BorderView>
</div>
</div>
@ -78,26 +78,89 @@ let cfytj = ref({})
let gyfrj = ref({})
let lq = ref({})
let bar = ref({})
let pie = ref()
let pie = ref([])
let warning = ref(false)
function init() {
dDeviceList().then((res: any) => {
if (res.code == 200) {
let data: any = res.data
let activationRate = {
xAxisData: [],
rate: []
}
let production = []
data.forEach(item => {
if (item.name == '工业缝纫机') {
gyfrj.value = item
production.push({
production: item.production,
name: item.name,
planProduction: item.planProduction,
option: pie_option(item.planProduction, item.production)
})
} else if (item.name == '冲缝一体机') {
cfytj.value = item
production.push({
production: item.production,
name: item.name,
planProduction: item.planProduction,
option: pie_option(item.planProduction, item.production)
})
} else if (item.name == '立切机180双喷机') {
lq.value = item
}
activationRate.xAxisData.push(item.label)
activationRate.rate.push(item.activation)
})
bar.value = activationRate
pie.value = production
}
})
}
function pie_option(planProduction,production) {
return {
tooltip: {
trigger: 'item'
},
legend: {
top: '10%',
left: 'center',
textStyle: {
color: "#ffffff",
fontSize: 14,
},
},
series: [
{
name: proxy.tLang('messages', '产出进度'),
type: 'pie',
radius: ['80%', '90%'],
center: ['50%', '70%'],
startAngle: 210,
endAngle: 330,
label: {
show: true,
position: 'center',
formatter: (params) => {
console.log(params,'params');
return (production/planProduction*100).toFixed(1) + '%'
},
color: "#fff",
},
data: [
{ value: production, name: proxy.tLang('messages', '已完成'), itemStyle: { color: '#7cffb2' } },
{ value: planProduction - production, name: proxy.tLang('messages', '未完成'), itemStyle: { color: '#ff6e76' } },
]
}
]
}
}
onMounted(() => {
init()
})
@ -215,6 +278,7 @@ onMounted(()=>{
:deep(.green) {
background-color: #7cffb2;
}
:deep(.green-color) {
color: #7cffb2;
}
@ -222,6 +286,7 @@ onMounted(()=>{
:deep(.yello) {
background-color: #fddd60;
}
:deep(.yello-color) {
color: #fddd60;
}
@ -229,6 +294,7 @@ onMounted(()=>{
:deep(.red) {
background-color: #ff6e76;
}
:deep(.red-color) {
color: #ff6e76;
}