添加微工厂缝纫设备看板页面 未接接口
This commit is contained in:
hzz
parent
feb3e3b6ca
commit
c878e14c01
@ -306,5 +306,8 @@ export default {
|
||||
'效益&效率':'Benefit&Efficiency',
|
||||
'效益':'Benefit',
|
||||
'效率':'Efficiency',
|
||||
'微工厂缝纫设备看板':'微工厂缝纫设备看板',
|
||||
'工作时间':'工作时间',
|
||||
'空闲时间':'空闲时间',
|
||||
}
|
||||
}
|
||||
@ -168,10 +168,10 @@ export default {
|
||||
'GatewayON':'网关在线',
|
||||
'DevOffNum':'设备离线数量',
|
||||
'SewingTime':'缝纫时间',
|
||||
'realityPresserFootLiftNum':'今日抬压脚次数',
|
||||
'realityPresserFootLiftNum':'实际抬压脚次数',
|
||||
'AvgPresserFootLiftNum':'平均抬压脚次数',
|
||||
'ratio':'比率',
|
||||
'realityTrimNum':'今日剪线次数',
|
||||
'realityTrimNum':'实际剪线次数',
|
||||
'AvgTrimNum':'平均剪线次数',
|
||||
'runTime':'运行时间',
|
||||
'datacom':'数据通信',
|
||||
@ -306,5 +306,8 @@ export default {
|
||||
'效益&效率':'效益&效率',
|
||||
'效益':'效益',
|
||||
'效率':'效率',
|
||||
'微工厂缝纫设备看板':'微工厂缝纫设备看板',
|
||||
'工作时间':'工作时间',
|
||||
'空闲时间':'空闲时间',
|
||||
}
|
||||
}
|
||||
@ -98,6 +98,11 @@ const routes: Array<RouteRecordRaw> = [
|
||||
name: "MicrofactoryDev",
|
||||
component: () => import("../views/MicrofactoryDev/index.vue"),
|
||||
},
|
||||
{
|
||||
path: "/MicrofactoryDevOnline",
|
||||
name: "MicrofactoryDevOnline",
|
||||
component: () => import("../views/MicrofactoryDevOnline/index.vue"),
|
||||
},
|
||||
|
||||
{
|
||||
path: "/PaintShopView",
|
||||
|
||||
133
src/views/MicrofactoryDevOnline/components/RingChart.vue
Normal file
133
src/views/MicrofactoryDevOnline/components/RingChart.vue
Normal file
@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<dv-border-box-6 :color="['#20aec5', '#20aec5']">
|
||||
<div class="content">
|
||||
<div class="status online">在线</div>
|
||||
<div class="right-top">
|
||||
<div class="num">0</div>
|
||||
<div class="name">当日总针数</div>
|
||||
</div>
|
||||
<div class="chart" ref="chart"></div>
|
||||
<div class="bottom">五线包缝机(RP2011158)</div>
|
||||
</div>
|
||||
</dv-border-box-6>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { getCurrentInstance, ref, onMounted } from 'vue';
|
||||
const { proxy } = getCurrentInstance()! as any;
|
||||
const chart = ref(null);
|
||||
let myChart: any = null;
|
||||
const init = () => {
|
||||
myChart = proxy.$echarts.init(chart.value);
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
color:['#95A2FF','#FA8080'],
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['35%', '80%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
formatter: '{c}小时',
|
||||
position: 'inside',
|
||||
color: '#fff',
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 21, name: '工作时间' },
|
||||
{ value: 3, name: '空闲时间' },
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
init();
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.status {
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
top: 8px;
|
||||
left: 12px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.right-top {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
top: 8px;
|
||||
right: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.right-top .num {
|
||||
color: #1E90FF;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.right-top .name {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
color: #fff;
|
||||
line-height: 24px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chart {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
left: 0;
|
||||
bottom: 32px;
|
||||
}
|
||||
|
||||
.online {
|
||||
color: rgb(255, 140, 0);
|
||||
}
|
||||
|
||||
.outline {
|
||||
color: rgb(153, 153, 153);
|
||||
}
|
||||
</style>
|
||||
69
src/views/MicrofactoryDevOnline/index.vue
Normal file
69
src/views/MicrofactoryDevOnline/index.vue
Normal file
@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<div :class="$style['container']">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<header2
|
||||
ref="headerref"
|
||||
:width="'100%'"
|
||||
:height="'120px'"
|
||||
:title="t('messages.微工厂缝纫设备看板')"
|
||||
:titleTip="titleTip"
|
||||
:typeFun="['time']"
|
||||
:alarmType="[]"
|
||||
>
|
||||
</header2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content" ref="Acontent">
|
||||
<div v-for="inem in 21" class="ringchart">
|
||||
<RingChart></RingChart>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import header2 from "@/components/headerBox/header2.vue";
|
||||
import RingChart from "./components/RingChart.vue";
|
||||
import {ref} from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
let {t} = useI18n();
|
||||
|
||||
document.title = t('messages.微工厂缝纫设备看板');
|
||||
let titleTip = [
|
||||
{
|
||||
color: "#95A2FF",
|
||||
name: t('messages.工作时间'),
|
||||
},
|
||||
{
|
||||
color: "#FA8080",
|
||||
name: t('messages.空闲时间'),
|
||||
},
|
||||
];
|
||||
</script>
|
||||
<style module>
|
||||
.container {
|
||||
height: 1080px;
|
||||
width: 1920px;
|
||||
color: #20aec5;
|
||||
background-color: #100c2a;
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
.content {
|
||||
width: 100%;
|
||||
--header: 120px;
|
||||
height: calc(1080px - var(--header));
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ringchart {
|
||||
width: 260px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user