展会设备大屏 update
This commit is contained in:
hzz
parent
14d3716775
commit
3834c979a1
@ -1,6 +1,10 @@
|
||||
import {get,post} from "@/utils/http"
|
||||
|
||||
//气压
|
||||
//获取设备在线状态、设备列表
|
||||
export function getCismaList(){
|
||||
return get('/cisma/getCismaList')
|
||||
}
|
||||
|
||||
export function getFiveList(){
|
||||
return get('/cisma/getFiveList')
|
||||
}
|
||||
@ -15,14 +15,18 @@ const setCharts = () => {
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
data: ['步进抬压脚电\r\n脑花样平缝机', '超高速全自\r\n动电脑包缝\r\n机(五线)'],
|
||||
// axisLabel: {
|
||||
// interval: 0, //控制X轴刻度全部显示
|
||||
// rotate: 45, //倾斜角度
|
||||
// },
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [120, 200, 150, 80, 70, 110, 130],
|
||||
data: [120, 200],
|
||||
type: 'bar'
|
||||
}
|
||||
]
|
||||
|
||||
@ -8,11 +8,8 @@
|
||||
<div class="dev-content dev-title">
|
||||
<div class="key" v-for="item in dev_title">{{ item }}</div>
|
||||
</div>
|
||||
<div class="dev-content" v-for="(item,index) in dev_value">
|
||||
<div>{{ item.a }}</div>
|
||||
<div>{{ item.b }}</div>
|
||||
<div>{{ item.c }}</div>
|
||||
<div>{{ item.d }}</div>
|
||||
<div class="dev-content" v-for="(items, index) in dev_value">
|
||||
<div v-for="item in items">{{ item}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -27,8 +24,10 @@ const prop = defineProps({
|
||||
default: ['机架号', '状态', '布料层数', '裁片数量']
|
||||
},
|
||||
dev_value: {
|
||||
type: [Object],
|
||||
default: [{a:102014422,b:'待机',c:'40层',d:'1000片'}]
|
||||
type: [Array],
|
||||
default: [
|
||||
[102014422, '待机', '40层', '1000片']
|
||||
]
|
||||
},
|
||||
})
|
||||
</script>
|
||||
@ -41,20 +40,25 @@ const prop = defineProps({
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.dev-left,.dev-right {
|
||||
|
||||
.dev-left,
|
||||
.dev-right {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.dev-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dev-title {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.dev-box {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
@ -63,6 +67,7 @@ const prop = defineProps({
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dev-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -79,5 +84,4 @@ const prop = defineProps({
|
||||
line-height: 35px;
|
||||
text-align: center;
|
||||
background: url(@/assets/img/title_bg.svg) no-repeat center center / 100% 100%;
|
||||
}
|
||||
</style>
|
||||
}</style>
|
||||
|
||||
@ -28,7 +28,8 @@ const setCharts = ()=>{
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
|
||||
data: ['步进抬压脚电脑花样平缝机', '富怡全自动皮革缝纫机(任意转)整机', '富怡电脑绣花机(精密绣花机)', '超高速全自动电脑包缝机(五线)', '富怡全自动缝纫机(服装机)'],
|
||||
left:'100px'
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
@ -46,33 +47,38 @@ const setCharts = ()=>{
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Email',
|
||||
name: '步进抬压脚电脑花样平缝机',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
data: [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name: 'Union Ads',
|
||||
name: '富怡全自动皮革缝纫机(任意转)整机',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
data: [220, 182, 191, 234, 290, 330, 310]
|
||||
},
|
||||
{
|
||||
name: 'Video Ads',
|
||||
name: '富怡电脑绣花机(精密绣花机)',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
data: [150, 232, 201, 154, 190, 330, 410]
|
||||
},
|
||||
{
|
||||
name: 'Direct',
|
||||
name: '超高速全自动电脑包缝机(五线)',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
data: [320, 332, 301, 334, 390, 330, 320]
|
||||
},
|
||||
{
|
||||
name: 'Search Engine',
|
||||
name: '富怡全自动缝纫机(服装机)',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320]
|
||||
}
|
||||
]
|
||||
|
||||
@ -1,17 +1,34 @@
|
||||
<template>
|
||||
<div class="pbj-card">
|
||||
<div>机架号：12024467</div>
|
||||
<div>机架号：{{ data.label }}</div>
|
||||
<div>工作时间</div>
|
||||
<div class="demo-progress"><el-progress :text-inside="true" :stroke-width="26" :percentage="70" :format="format" />85%</div>
|
||||
<div>状态：工作</div>
|
||||
<div>铺布层数：50层</div>
|
||||
<div class="demo-progress"><el-progress :text-inside="true" :stroke-width="26" :percentage="percent" />{{percent}}%
|
||||
</div>
|
||||
<div>状态：{{ data.status }}</div>
|
||||
<div>铺布层数：{{data.layer}}层</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import {computed} from 'vue'
|
||||
let minute = 480;
|
||||
|
||||
const prop = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: {
|
||||
label: '12024467',
|
||||
time: 75,
|
||||
status: '工作',
|
||||
layer: 50
|
||||
}
|
||||
}
|
||||
})
|
||||
let percent = computed(() => {
|
||||
return prop.data.time//Math.floor((prop.data.time / 480) * 100);
|
||||
})
|
||||
function format(percentage) {
|
||||
return 3550;
|
||||
return prop.data.time;
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -27,13 +44,14 @@ function format (percentage) {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.demo-progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.demo-progress .el-progress--line {
|
||||
width: 350px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
}</style>
|
||||
|
||||
@ -38,10 +38,10 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<LineChart class="cc"></LineChart>
|
||||
<LineChart class="cc" :config="{ title: '工作帧数' }"></LineChart>
|
||||
<div class="cb">
|
||||
<Card title="富 怡 全 自 动 裁 床">
|
||||
<DevCard>
|
||||
<DevCard :dev_title="cc_title" :dev_value="cc_value">
|
||||
<div class="progress">
|
||||
<dv-water-level-pond :config="pond_config" style="width:120px;height:120px" />
|
||||
<div class="progress-title">工作时间</div>
|
||||
@ -128,9 +128,11 @@ let scrollBoardConfig = reactive({
|
||||
rawData: []
|
||||
})
|
||||
let dev_title = ['机架号', '设备状态', '剪线次数', '压脚次数']
|
||||
let cc_title = ['机架号', '设备状态', '布料层数', '裁片数量']
|
||||
let cc_value = ref([[102014421, '待机', '40层', '1000片']])
|
||||
let dev_value = [
|
||||
{ a: 102014422, b: '待机', c: '40层', d: '1000片' },
|
||||
{ a: 102014422, b: '待机', c: '40层', d: '1000片' },
|
||||
[102014423, '待机', '40层', '1000片'],
|
||||
[102014424, '待机', '40层', '1000片'],
|
||||
]
|
||||
|
||||
let pond_config = reactive({
|
||||
@ -138,8 +140,6 @@ let pond_config = reactive({
|
||||
shape: 'round'
|
||||
})
|
||||
async function reqCismaList() {
|
||||
console.log();
|
||||
|
||||
let res: any = await getCismaList()
|
||||
if (res.code === 200) {
|
||||
store.setDevlist(res.data.devlist)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user