update
This commit is contained in:
hzz
parent
c34d5e8abd
commit
ddddc85dd3
44
src/api/screen/micro.js
Normal file
44
src/api/screen/micro.js
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 查询设备列表
|
||||||
|
export function listDevice() {
|
||||||
|
return request({
|
||||||
|
url: '/mf/device',
|
||||||
|
method: 'get',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查询设备能耗排行
|
||||||
|
export function listElect(type) {
|
||||||
|
return request({
|
||||||
|
url: '/mf/elect?type=' + type,
|
||||||
|
method: 'get',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查询设备用电监测
|
||||||
|
export function electMonitoring() {
|
||||||
|
return request({
|
||||||
|
url: '/mf/electMonitoring',
|
||||||
|
method: 'get',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查询设备状态
|
||||||
|
export function deviceStatus() {
|
||||||
|
return request({
|
||||||
|
url: '/mf/deviceStatus',
|
||||||
|
method: 'get',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设备利用率
|
||||||
|
export function deviceRate() {
|
||||||
|
return request({
|
||||||
|
url: '/mf/deviceRate',
|
||||||
|
method: 'get',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -84,9 +84,9 @@ export const constantRoutes = [
|
|||||||
hidden: true
|
hidden: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/screen/test",
|
path: "/screen/devItem",
|
||||||
name: "MicroFactorytest",
|
name: "devItem",
|
||||||
component: () => import("../views/screen/main/index.vue"),
|
component: () => import("../views/screen/devItem/index.vue"),
|
||||||
hidden: true
|
hidden: true
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|||||||
@ -29,10 +29,10 @@
|
|||||||
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
|
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
|
||||||
v-hasPermi="['pms:records:remove']">删除</el-button>
|
v-hasPermi="['pms:records:remove']">删除</el-button>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="1.5">
|
<!-- <el-col :span="1.5">
|
||||||
<el-button type="warning" plain icon="Download" @click="handleExport"
|
<el-button type="warning" plain icon="Download" @click="handleExport"
|
||||||
v-hasPermi="['pms:records:export']">导出</el-button>
|
v-hasPermi="['pms:records:export']">导出</el-button>
|
||||||
</el-col>
|
</el-col> -->
|
||||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||||
</el-row>
|
</el-row>
|
||||||
|
|
||||||
|
|||||||
42
src/views/screen/devItem/component/card.vue
Normal file
42
src/views/screen/devItem/component/card.vue
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
<template>
|
||||||
|
<div class="item-container">
|
||||||
|
<div class="box-title" >{{ prop.title }}</div>
|
||||||
|
<div class="content">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
|
||||||
|
const prop = defineProps({
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: '标题'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.item-container {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
.box-title {
|
||||||
|
width: 100%;
|
||||||
|
height: 53px;
|
||||||
|
background: url('../image/u17.png') no-repeat;
|
||||||
|
background-size: auto 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-left: 32px;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 53px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 53px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
109
src/views/screen/devItem/component/stackBarChart.vue
Normal file
109
src/views/screen/devItem/component/stackBarChart.vue
Normal file
@ -0,0 +1,109 @@
|
|||||||
|
<template>
|
||||||
|
<v-chart :option="options" theme="dark" style="width: 100%;height: 100%;" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { computed, ref } from 'vue';
|
||||||
|
const prop = defineProps({
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {
|
||||||
|
xAxis: [],
|
||||||
|
series: []
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
const options = computed(() => {
|
||||||
|
return {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
// Use axis to trigger tooltip
|
||||||
|
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {},
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
name: 'h',
|
||||||
|
type: 'value',
|
||||||
|
axisLabel: {
|
||||||
|
color: '#fff',
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '工作',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'total',
|
||||||
|
barWidth: '30%',
|
||||||
|
label: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [320, 302, 301, 334, 390, 330, 320]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '待机',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'total',
|
||||||
|
barWidth: '30%',
|
||||||
|
label: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [120, 132, 101, 134, 90, 230, 210]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '停机',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'total',
|
||||||
|
barWidth: '30%',
|
||||||
|
label: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [220, 182, 191, 234, 290, 330, 310]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '故障',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'total',
|
||||||
|
barWidth: '30%',
|
||||||
|
label: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [150, 212, 201, 154, 190, 330, 410]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
BIN
src/views/screen/devItem/image/center-bg.png
Normal file
BIN
src/views/screen/devItem/image/center-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 942 KiB |
BIN
src/views/screen/devItem/image/u17.png
Normal file
BIN
src/views/screen/devItem/image/u17.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
244
src/views/screen/devItem/index.vue
Normal file
244
src/views/screen/devItem/index.vue
Normal file
@ -0,0 +1,244 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<div class="header">
|
||||||
|
<div class="title">微工厂设备详情</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="left-plane">
|
||||||
|
<div class="lt-plane">
|
||||||
|
<div class="ltl-plane">
|
||||||
|
<Card class="ltl-item1" title="设备详情">
|
||||||
|
<div class="ltl-content">
|
||||||
|
<div class="ltl-box">
|
||||||
|
<div class="ltl-item-box"><div class="label">名称：</div><div class="value">{{ '什么什么什么什么什么缝纫机' }}</div></div>
|
||||||
|
</div>
|
||||||
|
<div class="ltl-box">
|
||||||
|
<div class="ltl-item-box"><div class="label">编号：</div><div class="value">{{ 'xxxxxx' }}</div></div>
|
||||||
|
</div>
|
||||||
|
<div class="ltl-box">
|
||||||
|
<div class="ltl-item-box"><div class="label">负责人：</div><div class="value">{{ 'xxxxxx' }}</div></div>
|
||||||
|
</div>
|
||||||
|
<div class="ltl-box">
|
||||||
|
<div class="ltl-item-box"><div class="label">所在位置：</div><div class="value">{{ 'xxxxxx' }}</div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</Card>
|
||||||
|
<Card class="ltl-item2" title="设备详情"></Card>
|
||||||
|
</div>
|
||||||
|
<div class="ltr-plane">
|
||||||
|
<div class="c-item c-top">
|
||||||
|
<div class="item-box">当前状态：</div>
|
||||||
|
<div class="item-box">运行时长：</div>
|
||||||
|
</div>
|
||||||
|
<div class="c-item c-center">
|
||||||
|
<div class="item-box">停机时长：</div>
|
||||||
|
<div class="item-box">工作时长：</div>
|
||||||
|
</div>
|
||||||
|
<div class="c-item c-bottom">
|
||||||
|
<div class="item-box">故障时长：</div>
|
||||||
|
<div class="item-box">待机时长：</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Card class="lb-plane" title="设备状态分析">
|
||||||
|
<StackBarChart></StackBarChart>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="right-plane">
|
||||||
|
|
||||||
|
<Card class="right-item1" title="设备维修记录"></Card>
|
||||||
|
|
||||||
|
<Card class="right-item2" title="设备保养记录"></Card>
|
||||||
|
|
||||||
|
<Card class="right-item3" title="设备用电量分析"></Card>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import Card from './component/card.vue';
|
||||||
|
import StackBarChart from './component/stackBarChart.vue';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container {
|
||||||
|
width: 1920px;
|
||||||
|
height: 1080px;
|
||||||
|
position: relative;
|
||||||
|
// display: flex;
|
||||||
|
// justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background-image: url('/src/assets/images/screen-bg.png');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
/* 如果你不想让背景平铺 */
|
||||||
|
background-size: cover;
|
||||||
|
/* 或者其他你需要的大小设置 */
|
||||||
|
background-position: center;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
width: 100%;
|
||||||
|
height: 89px;
|
||||||
|
background-image: url('/src/assets/images/screen-header-bg1.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
width: 100%;
|
||||||
|
height: 89px;
|
||||||
|
font-size: 36px;
|
||||||
|
color: #f9f8f4;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 89px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
width: 100%;
|
||||||
|
height: 975px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 20px 0;
|
||||||
|
|
||||||
|
.right-plane {
|
||||||
|
width: 488px;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.right-item1 {
|
||||||
|
width: 100%;
|
||||||
|
height: 280px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-item2 {
|
||||||
|
width: 100%;
|
||||||
|
height: 280px;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-item3 {
|
||||||
|
width: 100%;
|
||||||
|
height: 395px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-plane {
|
||||||
|
width: 1400px;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.lt-plane {
|
||||||
|
width: 100%;
|
||||||
|
height: 635px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.ltl-plane {
|
||||||
|
width: 488px;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.ltl-item1 {
|
||||||
|
width: 100%;
|
||||||
|
height: 260px;
|
||||||
|
|
||||||
|
.ltl-content {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
.ltl-box {
|
||||||
|
width: 48%;
|
||||||
|
height: 50%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.ltl-item-box {
|
||||||
|
height: 60px;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background-color: rgba(2, 48, 87, 0.5);
|
||||||
|
border: #2A80B8 2px solid;
|
||||||
|
padding: 0 10px;
|
||||||
|
color: #f9f8f4;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 500;
|
||||||
|
text-align: center;
|
||||||
|
.label {
|
||||||
|
width: 50%;
|
||||||
|
text-wrap: nowrap;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.ltl-item2 {
|
||||||
|
width: 100%;
|
||||||
|
height: 360px;
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ltr-plane {
|
||||||
|
width: 892px;
|
||||||
|
height: 100%;
|
||||||
|
background: url('./image/center-bg.png') no-repeat;
|
||||||
|
background-size: 38% auto;
|
||||||
|
background-position: 50% 70%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.c-top,
|
||||||
|
.c-bottom {
|
||||||
|
width: 70%;
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c-center {
|
||||||
|
width: 85%;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.item-box {
|
||||||
|
background-color: rgba(2, 48, 87, 0.5);
|
||||||
|
border: #2A80B8 2px solid;
|
||||||
|
padding: 15px;
|
||||||
|
color: #f9f8f4;
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 500;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.lb-plane {
|
||||||
|
width: 100%;
|
||||||
|
height: 340px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,304 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="screen-container">
|
|
||||||
<!-- 顶部标题 -->
|
|
||||||
<div class="header">
|
|
||||||
<h1>微工厂设备</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content">
|
|
||||||
<!-- 左侧设备列表 -->
|
|
||||||
<div class="left-panel">
|
|
||||||
<div class="panel-title">
|
|
||||||
<span class="icon">▶</span>
|
|
||||||
设备列表
|
|
||||||
</div>
|
|
||||||
<div class="device-list">
|
|
||||||
<div class="device-item" v-for="device in deviceList" :key="device.code">
|
|
||||||
<span>{{ device.name }}</span>
|
|
||||||
<span>{{ device.code }}</span>
|
|
||||||
<span class="status" :class="device.status"></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 左侧产量统计图表 -->
|
|
||||||
<div class="chart-container">
|
|
||||||
<div class="panel-title">
|
|
||||||
<span class="icon">▶</span>
|
|
||||||
产量统计
|
|
||||||
</div>
|
|
||||||
<div ref="productionChart" style="height: 200px;"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 设备利用率图表 -->
|
|
||||||
<div class="chart-container">
|
|
||||||
<div class="panel-title">
|
|
||||||
<span class="icon">▶</span>
|
|
||||||
设备利用率
|
|
||||||
</div>
|
|
||||||
<div ref="utilizationChart" style="height: 200px;"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 中间主要内容区 -->
|
|
||||||
<div class="center-panel">
|
|
||||||
<div class="status-overview">
|
|
||||||
<div class="status-item">
|
|
||||||
<div class="label">工作数量</div>
|
|
||||||
<div class="value">3台</div>
|
|
||||||
</div>
|
|
||||||
<div class="status-item">
|
|
||||||
<div class="label">待机数量</div>
|
|
||||||
<div class="value">2台</div>
|
|
||||||
</div>
|
|
||||||
<div class="status-item">
|
|
||||||
<div class="label">停机数量</div>
|
|
||||||
<div class="value">2台</div>
|
|
||||||
</div>
|
|
||||||
<div class="status-item">
|
|
||||||
<div class="label">设备类型</div>
|
|
||||||
<div class="value">7种</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 中央圆环图 -->
|
|
||||||
<div class="status-center">
|
|
||||||
<div ref="centerChart" class="center-chart"></div>
|
|
||||||
<!-- 添加状态标签 -->
|
|
||||||
<div class="status-labels">
|
|
||||||
<div class="label-item" style="position: absolute; left: 10%; top: 50%; transform: translateY(-50%);">工作频率</div>
|
|
||||||
<div class="label-item" style="position: absolute; right: 10%; top: 50%; transform: translateY(-50%);">停机频率</div>
|
|
||||||
<div class="label-item" style="position: absolute; left: 30%; top: 20%;">3台</div>
|
|
||||||
<div class="label-item" style="position: absolute; right: 30%; top: 20%;">2台</div>
|
|
||||||
<div class="label-item" style="position: absolute; left: 30%; bottom: 20%;">2台</div>
|
|
||||||
<div class="label-item" style="position: absolute; right: 30%; bottom: 20%;">7种</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 用电监测 -->
|
|
||||||
<div class="power-monitoring">
|
|
||||||
<div class="panel-title">用电监测</div>
|
|
||||||
<div class="power-charts">
|
|
||||||
<div ref="powerChart1" class="power-chart"></div>
|
|
||||||
<div ref="powerChart2" class="power-chart"></div>
|
|
||||||
<div ref="powerChart3" class="power-chart"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 右侧统计信息 -->
|
|
||||||
<div class="right-panel">
|
|
||||||
<div class="production-stats">
|
|
||||||
<div class="panel-title">当月计划生产的产品类型及计划产量</div>
|
|
||||||
<div class="stats-list">
|
|
||||||
<div class="stats-item" v-for="(item, index) in productionStats" :key="index">
|
|
||||||
<span>产品{{ index + 1 }}</span>
|
|
||||||
<div ref="productionProgress" class="progress-chart"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, onMounted } from 'vue'
|
|
||||||
import * as echarts from 'echarts'
|
|
||||||
|
|
||||||
// 设备列表数据
|
|
||||||
const deviceList = ref([
|
|
||||||
{ name: '电子系统机', code: 'W01', status: 'working' },
|
|
||||||
{ name: '电脑喷头检测机', code: 'W02', status: 'standby' },
|
|
||||||
{ name: '自动打磨头机机', code: 'W03', status: 'stopped' },
|
|
||||||
// ... 其他设备
|
|
||||||
])
|
|
||||||
|
|
||||||
// 图表实例引用
|
|
||||||
const productionChart = ref(null)
|
|
||||||
const utilizationChart = ref(null)
|
|
||||||
const centerChart = ref(null)
|
|
||||||
const powerChart1 = ref(null)
|
|
||||||
const powerChart2 = ref(null)
|
|
||||||
const powerChart3 = ref(null)
|
|
||||||
|
|
||||||
// 初始化图表
|
|
||||||
onMounted(() => {
|
|
||||||
initProductionChart()
|
|
||||||
initUtilizationChart()
|
|
||||||
initCenterChart()
|
|
||||||
initPowerCharts()
|
|
||||||
})
|
|
||||||
|
|
||||||
// 初始化产量统计图表
|
|
||||||
const initProductionChart = () => {
|
|
||||||
const chart = echarts.init(productionChart.value)
|
|
||||||
chart.setOption({
|
|
||||||
// ... 配置产量统计图表选项
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 初始化设备利用率图表
|
|
||||||
const initUtilizationChart = () => {
|
|
||||||
const chart = echarts.init(utilizationChart.value)
|
|
||||||
chart.setOption({
|
|
||||||
// ... 配置设备利用率图表选项
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 初始化中央圆环图
|
|
||||||
const initCenterChart = () => {
|
|
||||||
const chart = echarts.init(centerChart.value)
|
|
||||||
chart.setOption({
|
|
||||||
series: [{
|
|
||||||
type: 'gauge',
|
|
||||||
startAngle: 90,
|
|
||||||
endAngle: -270,
|
|
||||||
pointer: { show: false },
|
|
||||||
progress: {
|
|
||||||
show: true,
|
|
||||||
overlap: false,
|
|
||||||
roundCap: true,
|
|
||||||
clip: false,
|
|
||||||
itemStyle: {
|
|
||||||
color: '#58D9F9'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
width: 40
|
|
||||||
}
|
|
||||||
},
|
|
||||||
splitLine: { show: false },
|
|
||||||
axisTick: { show: false },
|
|
||||||
axisLabel: { show: false },
|
|
||||||
data: [{
|
|
||||||
value: 82.43,
|
|
||||||
name: '完成率',
|
|
||||||
title: { offsetCenter: ['0%', '0%'] },
|
|
||||||
detail: { offsetCenter: ['0%', '30%'] }
|
|
||||||
}]
|
|
||||||
}]
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 初始化用电监测图表
|
|
||||||
const initPowerCharts = () => {
|
|
||||||
[powerChart1, powerChart2, powerChart3].forEach((chartRef, index) => {
|
|
||||||
const chart = echarts.init(chartRef.value)
|
|
||||||
chart.setOption({
|
|
||||||
// ... 配置用电监测图表选项
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.screen-container {
|
|
||||||
width: 1920px;
|
|
||||||
height: 1080px;
|
|
||||||
background-color: #001529;
|
|
||||||
color: #fff;
|
|
||||||
padding: 20px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
|
||||||
text-align: center;
|
|
||||||
padding: 20px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
display: flex;
|
|
||||||
height: calc(100% - 100px);
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left-panel, .right-panel {
|
|
||||||
width: 400px;
|
|
||||||
background-color: rgba(0, 21, 41, 0.7);
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.center-panel {
|
|
||||||
flex: 1;
|
|
||||||
background-color: rgba(0, 21, 41, 0.7);
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel-title {
|
|
||||||
font-size: 18px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
color: #58D9F9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.device-list {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.device-item {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 10px;
|
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.status {
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status.working { background-color: #52c41a; }
|
|
||||||
.status.standby { background-color: #faad14; }
|
|
||||||
.status.stopped { background-color: #f5222d; }
|
|
||||||
|
|
||||||
.status-overview {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-item {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.center-chart {
|
|
||||||
height: 400px;
|
|
||||||
margin: 30px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.power-monitoring {
|
|
||||||
margin-top: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.power-charts {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.power-chart {
|
|
||||||
width: 30%;
|
|
||||||
height: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stats-list {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-chart {
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-center {
|
|
||||||
position: relative;
|
|
||||||
height: 400px; /* 调整大小以适应圆环图 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-labels .label-item {
|
|
||||||
color: #fff;
|
|
||||||
font-size: 16px;
|
|
||||||
text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -26,7 +26,7 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 53px;
|
height: 53px;
|
||||||
background: url('../image/u17.png') no-repeat;
|
background: url('../image/u17.png') no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: auto 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding-left: 32px;
|
padding-left: 32px;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
|
|||||||
@ -39,16 +39,19 @@ const options = computed(() => {
|
|||||||
extraCssText: 'border-radius: 8px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);'
|
extraCssText: 'border-radius: 8px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);'
|
||||||
},
|
},
|
||||||
backgroundColor: 'transparent',
|
backgroundColor: 'transparent',
|
||||||
legend: {
|
// legend: {
|
||||||
data: ['上月', '本月'],
|
// data: ['上月', '本月'],
|
||||||
right: 'left',
|
// right: 'left',
|
||||||
textStyle: {
|
// textStyle: {
|
||||||
color: '#ffff'
|
// color: '#ffff'
|
||||||
}
|
// }
|
||||||
|
// },
|
||||||
|
grid: {
|
||||||
|
left: '10%',
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: ['W01', 'W02', 'W03', 'W04', 'W05', 'W06', 'W07'],
|
data: prop.data.xAxis,
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: "#ffffff",
|
color: "#ffffff",
|
||||||
},
|
},
|
||||||
@ -71,8 +74,8 @@ const options = computed(() => {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
series: [{
|
series: [{
|
||||||
name: '上月',
|
name: '利用率',
|
||||||
data: [20, 90, 60, 80, 85, 50, 70],
|
data: prop.data.series,
|
||||||
type: 'line',
|
type: 'line',
|
||||||
smooth: true,
|
smooth: true,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
@ -97,41 +100,8 @@ const options = computed(() => {
|
|||||||
}]
|
}]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, {
|
|
||||||
name: '本月',
|
|
||||||
data: [50, 60, 10, 60, 50, 80, 90],
|
|
||||||
type: 'line',
|
|
||||||
smooth: true,
|
|
||||||
itemStyle: {
|
|
||||||
color: '#48858e',
|
|
||||||
},
|
|
||||||
lineStyle: {
|
|
||||||
width: 2,
|
|
||||||
},
|
|
||||||
areaStyle: {
|
|
||||||
color: {
|
|
||||||
type: 'linear',
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
x2: 0,
|
|
||||||
y2: 1,
|
|
||||||
colorStops: [{
|
|
||||||
offset: 0,
|
|
||||||
color: 'rgb(72 ,133 ,142 ,0.6)'
|
|
||||||
}, {
|
|
||||||
offset: 1,
|
|
||||||
color: 'rgb(72 ,133 ,142 ,0.2)'
|
|
||||||
}]
|
}]
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}],
|
|
||||||
grid: {
|
|
||||||
left: '8%',
|
|
||||||
right: '2%',
|
|
||||||
top: '10%',
|
|
||||||
bottom: '12%'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@ -23,7 +23,7 @@ const options = computed(() => {
|
|||||||
type: "gauge",
|
type: "gauge",
|
||||||
z: 3,
|
z: 3,
|
||||||
min: 0,
|
min: 0,
|
||||||
max: 180,
|
max: 380,
|
||||||
radius: "85%",
|
radius: "85%",
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
|
|||||||
@ -57,11 +57,6 @@ function drawChart(elementId) {
|
|||||||
// trigger: 'item'
|
// trigger: 'item'
|
||||||
// },
|
// },
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'shadow'
|
|
||||||
},
|
|
||||||
valueFormatter: (value) => value + ' kW·h'
|
|
||||||
},
|
},
|
||||||
|
|
||||||
toolbox: {
|
toolbox: {
|
||||||
@ -102,7 +97,7 @@ function drawChart(elementId) {
|
|||||||
inverse: true,
|
inverse: true,
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
fontSize: 16,
|
fontSize: 13,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
@ -145,7 +140,7 @@ function drawChart(elementId) {
|
|||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
width: 65%;
|
width: 65%;
|
||||||
height: 65%;
|
height: 95%;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
background-color: rgba(18, 27, 38, 0.9137254901960784);
|
background-color: rgba(18, 27, 38, 0.9137254901960784);
|
||||||
|
|||||||
@ -32,8 +32,8 @@
|
|||||||
|
|
||||||
<SortBarChart :data="sortBarChartData" fill="#169BD5" />
|
<SortBarChart :data="sortBarChartData" fill="#169BD5" />
|
||||||
<div class="radio-ab-lb">
|
<div class="radio-ab-lb">
|
||||||
<el-radio-group v-model="radio_bar" size="small">
|
<el-radio-group v-model="radio_bar" @change="handleChangeBar" size="small">
|
||||||
<el-radio-button label="single">当天</el-radio-button>
|
<el-radio-button label="d">当天</el-radio-button>
|
||||||
<el-radio-button label="all">累计</el-radio-button>
|
<el-radio-button label="all">累计</el-radio-button>
|
||||||
</el-radio-group>
|
</el-radio-group>
|
||||||
</div>
|
</div>
|
||||||
@ -41,11 +41,12 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="center-panel">
|
<div class="center-panel">
|
||||||
<div class="dev-type-overview">
|
<div class="dev-type-overview">
|
||||||
<div class="status-item" v-for="item in devTypeList" :key="item.label">
|
<div class="status-item" v-for="item in devStatus.devTypes" :key="item.type">
|
||||||
<div class="value">
|
<div class="value">
|
||||||
<div class="on-text">{{ item.on }}</div>
|
<div class="on-text">{{ item.work }}</div>
|
||||||
<div class="all-text">{{ item.all }}</div></div>
|
<div class="all-text">{{ item.total }}</div>
|
||||||
<div class="label">{{ item.label }}</div>
|
</div>
|
||||||
|
<div class="label">{{ item.name }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="status-flag">
|
<div class="status-flag">
|
||||||
<div class="yuan green"></div>
|
<div class="yuan green"></div>
|
||||||
@ -59,14 +60,14 @@
|
|||||||
<div class="item-label item-label-1">工作数量</div>
|
<div class="item-label item-label-1">工作数量</div>
|
||||||
<div class="item-label item-label-2">停机数量</div>
|
<div class="item-label item-label-2">停机数量</div>
|
||||||
<div class="item-label item-label-3">待机数量</div>
|
<div class="item-label item-label-3">待机数量</div>
|
||||||
<div class="item-label item-label-4">设备类型</div>
|
<div class="item-label item-label-4">设备总数</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="status-center">
|
<div class="status-center">
|
||||||
<div class="status-center-item">
|
<div class="status-center-item">
|
||||||
<div class="item-value item-label-1">31台</div>
|
<div class="item-value item-label-1">{{devStatus.work}}台</div>
|
||||||
<div class="item-value item-label-2">11台</div>
|
<div class="item-value item-label-2">{{devStatus.stop}}台</div>
|
||||||
<div class="item-value item-label-3">21台</div>
|
<div class="item-value item-label-3">{{devStatus.wait}}台</div>
|
||||||
<div class="item-value item-label-4">71种</div>
|
<div class="item-value item-label-4">{{devStatus.total}}台</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="centerChart">
|
<div class="centerChart">
|
||||||
@ -88,7 +89,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="right-panel">
|
<div class="right-panel">
|
||||||
<CardVue class="left-container" title="设备利用率">
|
<CardVue class="left-container" title="设备利用率">
|
||||||
<LineChart />
|
<LineChart :data="rateData"/>
|
||||||
</CardVue>
|
</CardVue>
|
||||||
<CardVue class="left-container" title="设备提醒">
|
<CardVue class="left-container" title="设备提醒">
|
||||||
|
|
||||||
@ -120,21 +121,22 @@ import u156 from './image/u156.png'
|
|||||||
import u157 from './image/u157.png'
|
import u157 from './image/u157.png'
|
||||||
import u158 from './image/u158.png'
|
import u158 from './image/u158.png'
|
||||||
import 'element-plus/theme-chalk/dark/css-vars.css'
|
import 'element-plus/theme-chalk/dark/css-vars.css'
|
||||||
|
import { listDevice, listElect, electMonitoring,deviceStatus,deviceRate } from '@/api/screen/micro'
|
||||||
|
|
||||||
|
|
||||||
let radio_bar = ref('single')
|
let radio_bar = ref('d')
|
||||||
let scrollBoardConfig = reactive({
|
let scrollBoardConfig = reactive({
|
||||||
header: [
|
header: [
|
||||||
'<div style="color: #21dadb;">设备名称</div>',
|
|
||||||
'<div style="color: #21dadb;">编码</div>',
|
'<div style="color: #21dadb;">编码</div>',
|
||||||
'<div style="color: #21dadb;">能耗</div>',
|
'<div style="color: #21dadb;">设备名称</div>',
|
||||||
'<div style="color: #21dadb;">运行时长</div>',
|
'<div style="color: #21dadb;">运行时长</div>',
|
||||||
|
'<div style="color: #21dadb;">设备利用率</div>',
|
||||||
'<div style="color: #21dadb;">状态</div>'],//, '故障率'
|
'<div style="color: #21dadb;">状态</div>'],//, '故障率'
|
||||||
headerBGC: 'transparent',
|
headerBGC: 'transparent',
|
||||||
oddRowBGC: 'transparent',
|
oddRowBGC: 'transparent',
|
||||||
evenRowBGC: 'transparent',
|
evenRowBGC: 'transparent',
|
||||||
rowNum: 10,
|
rowNum: 10,
|
||||||
columnWidth: [260, 160, 180, 180, 180, 180],
|
columnWidth: [180, 280, 180, 180, 120, 120],
|
||||||
align: ['center', 'center', 'center', 'center', 'center', 'center'],
|
align: ['center', 'center', 'center', 'center', 'center', 'center'],
|
||||||
data: [],
|
data: [],
|
||||||
rawData: []
|
rawData: []
|
||||||
@ -151,23 +153,104 @@ let remindConfig = reactive({
|
|||||||
oddRowBGC: 'transparent',
|
oddRowBGC: 'transparent',
|
||||||
evenRowBGC: 'transparent',
|
evenRowBGC: 'transparent',
|
||||||
rowNum: 6,
|
rowNum: 6,
|
||||||
columnWidth: [160, 260, 180, 180, 180, 240],
|
columnWidth: [300, 120, 180, 180, 180, 100],
|
||||||
align: ['center', 'center', 'center', 'center', 'center', 'center'],
|
align: ['center', 'center', 'center', 'center', 'center', 'center'],
|
||||||
data: [],
|
data: [],
|
||||||
rawData: []
|
rawData: []
|
||||||
})
|
})
|
||||||
|
|
||||||
let scrollBoardConfig_data = ref([
|
let devStatus = reactive({
|
||||||
['电子套结机', '123456', '123456', '123456', `<div style="width:100%;height:100%;display:flex;justify-content: space-around;
|
"wait": 0,
|
||||||
align-items: center;"><img src="${u158}" width="32" height="32">`],
|
"total": 0,
|
||||||
['电子套结机', '123456', '123456', '123456', '123456'],
|
"stop": 0,
|
||||||
['电子套结机', '123456', '123456', '123456', '123456'],
|
"rate": 0,
|
||||||
['电子套结机', '123456', '123456', '123456', '123456'],
|
"work": 0,
|
||||||
['电子套结机', '123456', '123456', '123456', '123456'],
|
"devTypes": [ ]
|
||||||
['电子套结机', '123456', '123456', '123456', '123456'],
|
})
|
||||||
|
|
||||||
|
let devList = ref([])
|
||||||
|
let scrollBoardConfig_data = computed(()=>{
|
||||||
|
let data = []
|
||||||
|
data = devList.value.map(item => {
|
||||||
|
return [
|
||||||
|
item.code,
|
||||||
|
item.name,
|
||||||
|
item.runTime + 'min',
|
||||||
|
item.rate,
|
||||||
|
status2Img(item.state)
|
||||||
|
]
|
||||||
|
})
|
||||||
|
return data
|
||||||
|
})
|
||||||
|
|
||||||
|
function status2Img(status) {
|
||||||
|
let html = `<div style="width:100%;height:100%;display:flex;justify-content: space-around;align-items: center;">`
|
||||||
|
switch (status) {
|
||||||
|
case 0:
|
||||||
|
html += `<img src="${u157}" width="32" height="32">`
|
||||||
|
break
|
||||||
|
case 1:
|
||||||
|
html += `<img src="${u156}" width="32" height="32">`
|
||||||
|
break
|
||||||
|
case 2:
|
||||||
|
html += `<img src="${u83}" width="32" height="32">`
|
||||||
|
break
|
||||||
|
case 4:
|
||||||
|
html += `<img src="${u158}" width="32" height="32">`
|
||||||
|
break
|
||||||
|
default:
|
||||||
|
html += `<img src="${u157}" width="32" height="32">`
|
||||||
|
break
|
||||||
|
}
|
||||||
|
html += '</div>'
|
||||||
|
return html
|
||||||
|
}
|
||||||
|
|
||||||
|
//获取设备列表
|
||||||
|
function getListDevice() {
|
||||||
|
listDevice().then(res => {
|
||||||
|
devList.value = res.data
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
let sortBarChartData = ref([])
|
||||||
|
//获取设备能耗排行
|
||||||
|
function getlistElect() {
|
||||||
|
listElect(radio_bar.value).then(res => {
|
||||||
|
sortBarChartData.value = res.data.map(item => {
|
||||||
|
return {
|
||||||
|
name: item.name,
|
||||||
|
value: item.electricity
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//切换能耗排行
|
||||||
|
function handleChangeBar() {
|
||||||
|
getlistElect()
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
let powerMonitoring = ref([
|
||||||
|
{ label: '当天耗电量', value: 8 },
|
||||||
|
{ label: '本周耗电量', value: 60 },
|
||||||
|
{ label: '本月耗电量', value: 288 }
|
||||||
|
|
||||||
])
|
])
|
||||||
|
|
||||||
|
//获取用电监测
|
||||||
|
function getelectMonitoring() {
|
||||||
|
electMonitoring().then(res => {
|
||||||
|
powerMonitoring.value = [
|
||||||
|
{ label: '当天耗电量', value: res.data.day },
|
||||||
|
{ label: '本周耗电量', value: res.data.week },
|
||||||
|
{ label: '本月耗电量', value: res.data.month }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
let remindData = ref([
|
let remindData = ref([
|
||||||
['abc', '模板缝纫机', '上油', '张三', '2025-02-19'],
|
['abc', '模板缝纫机', '上油', '张三', '2025-02-19'],
|
||||||
['acg', '铺布机', '检查', '李四', '2025-02-20'],
|
['acg', '铺布机', '检查', '李四', '2025-02-20'],
|
||||||
@ -175,38 +258,35 @@ let remindData = ref([
|
|||||||
|
|
||||||
])
|
])
|
||||||
|
|
||||||
let devTypeList = ref([
|
|
||||||
{ label: '板房设备', on: 2, all: 6 },
|
|
||||||
{ label: '裁剪设备', on: 3, all: 8 },
|
|
||||||
{ label: '模板缝纫设备', on: 4, all: 10 },
|
|
||||||
{ label: '簇绒设备', on: 5, all: 12 },
|
|
||||||
{ label: '绣花设备', on: 3, all: 8 },
|
|
||||||
{ label: '缝纫设备', on: 3, all: 8 },
|
|
||||||
{ label: '后整设备', on: 3, all: 8 },
|
|
||||||
])
|
|
||||||
let productionChart = ref()
|
|
||||||
let powerMonitoring = ref([
|
|
||||||
{ label: '当天耗电量', value: 8 },
|
|
||||||
{ label: '本周耗电量', value: 60 },
|
|
||||||
{ label: '本月耗电量', value: 288 }
|
|
||||||
|
|
||||||
|
|
||||||
])
|
//获取设备状态
|
||||||
let sortBarChartData = ref([])
|
function getdeviceStatus() {
|
||||||
|
deviceStatus().then(res=>{
|
||||||
|
devStatus.wait = res.data.wait
|
||||||
|
devStatus.total = res.data.total
|
||||||
|
devStatus.stop = res.data.stop
|
||||||
|
devStatus.rate = res.data.rate
|
||||||
|
devStatus.work = res.data.work
|
||||||
|
devStatus.devTypes = res.data.devTypes
|
||||||
|
})
|
||||||
|
}
|
||||||
|
let rateData = ref()
|
||||||
|
//设备利用率
|
||||||
|
function getdeviceRate() {
|
||||||
|
deviceRate().then(res => {
|
||||||
|
rateData.value = {
|
||||||
|
xAxis: res.data.dates,
|
||||||
|
series: res.data.rate
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
sortBarChartData.value = [
|
getListDevice()
|
||||||
|
getlistElect()
|
||||||
{ name: '缝纫设备1', value: 120 },
|
getelectMonitoring()
|
||||||
{ name: '缝纫设备2', value: 200 },
|
getdeviceStatus()
|
||||||
{ name: '缝纫设备3', value: 150 },
|
getdeviceRate()
|
||||||
{ name: '缝纫设备4', value: 80 },
|
|
||||||
{ name: '缝纫设备5', value: 70 },
|
|
||||||
{ name: '板房设备1', value: 135 },
|
|
||||||
{ name: '板房设备2', value: 122 },
|
|
||||||
{ name: '板房设备3', value: 85 },
|
|
||||||
{ name: '板房设备4', value: 47 },
|
|
||||||
{ name: '板房设备5', value: 31 },
|
|
||||||
]
|
|
||||||
|
|
||||||
|
|
||||||
})
|
})
|
||||||
@ -343,6 +423,7 @@ onUnmounted(() => {
|
|||||||
left: 61px;
|
left: 61px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.on-text {
|
.on-text {
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
@ -353,6 +434,7 @@ onUnmounted(() => {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.all-text {
|
.all-text {
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
@ -364,6 +446,7 @@ onUnmounted(() => {
|
|||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
@ -383,6 +466,7 @@ onUnmounted(() => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.yuan {
|
.yuan {
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
@ -396,6 +480,7 @@ onUnmounted(() => {
|
|||||||
.blue {
|
.blue {
|
||||||
background-color: #21dadb;
|
background-color: #21dadb;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flag-text {
|
.flag-text {
|
||||||
color: #f9f8f4;
|
color: #f9f8f4;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user