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
|
||||
},
|
||||
{
|
||||
path: "/screen/test",
|
||||
name: "MicroFactorytest",
|
||||
component: () => import("../views/screen/main/index.vue"),
|
||||
path: "/screen/devItem",
|
||||
name: "devItem",
|
||||
component: () => import("../views/screen/devItem/index.vue"),
|
||||
hidden: true
|
||||
},
|
||||
]
|
||||
|
||||
@ -29,10 +29,10 @@
|
||||
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
|
||||
v-hasPermi="['pms:records:remove']">删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<!-- <el-col :span="1.5">
|
||||
<el-button type="warning" plain icon="Download" @click="handleExport"
|
||||
v-hasPermi="['pms:records:export']">导出</el-button>
|
||||
</el-col>
|
||||
</el-col> -->
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</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%;
|
||||
height: 53px;
|
||||
background: url('../image/u17.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-size: auto 100%;
|
||||
box-sizing: border-box;
|
||||
padding-left: 32px;
|
||||
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);'
|
||||
},
|
||||
backgroundColor: 'transparent',
|
||||
legend: {
|
||||
data: ['上月', '本月'],
|
||||
right: 'left',
|
||||
textStyle: {
|
||||
color: '#ffff'
|
||||
}
|
||||
// legend: {
|
||||
// data: ['上月', '本月'],
|
||||
// right: 'left',
|
||||
// textStyle: {
|
||||
// color: '#ffff'
|
||||
// }
|
||||
// },
|
||||
grid: {
|
||||
left: '10%',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['W01', 'W02', 'W03', 'W04', 'W05', 'W06', 'W07'],
|
||||
data: prop.data.xAxis,
|
||||
axisLabel: {
|
||||
color: "#ffffff",
|
||||
},
|
||||
@ -71,8 +74,8 @@ const options = computed(() => {
|
||||
},
|
||||
},
|
||||
series: [{
|
||||
name: '上月',
|
||||
data: [20, 90, 60, 80, 85, 50, 70],
|
||||
name: '利用率',
|
||||
data: prop.data.series,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
itemStyle: {
|
||||
@ -97,40 +100,7 @@ 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>
|
||||
|
||||
@ -23,7 +23,7 @@ const options = computed(() => {
|
||||
type: "gauge",
|
||||
z: 3,
|
||||
min: 0,
|
||||
max: 180,
|
||||
max: 380,
|
||||
radius: "85%",
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
|
||||
@ -57,11 +57,6 @@ function drawChart(elementId) {
|
||||
// trigger: 'item'
|
||||
// },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
valueFormatter: (value) => value + ' kW·h'
|
||||
},
|
||||
|
||||
toolbox: {
|
||||
@ -102,7 +97,7 @@ function drawChart(elementId) {
|
||||
inverse: true,
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
fontSize: 13,
|
||||
}
|
||||
},
|
||||
series: [
|
||||
@ -145,7 +140,7 @@ function drawChart(elementId) {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 65%;
|
||||
height: 65%;
|
||||
height: 95%;
|
||||
z-index: 999;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: rgba(18, 27, 38, 0.9137254901960784);
|
||||
|
||||
@ -32,8 +32,8 @@
|
||||
|
||||
<SortBarChart :data="sortBarChartData" fill="#169BD5" />
|
||||
<div class="radio-ab-lb">
|
||||
<el-radio-group v-model="radio_bar" size="small">
|
||||
<el-radio-button label="single">当天</el-radio-button>
|
||||
<el-radio-group v-model="radio_bar" @change="handleChangeBar" size="small">
|
||||
<el-radio-button label="d">当天</el-radio-button>
|
||||
<el-radio-button label="all">累计</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
@ -41,11 +41,12 @@
|
||||
</div>
|
||||
<div class="center-panel">
|
||||
<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="on-text">{{ item.on }}</div>
|
||||
<div class="all-text">{{ item.all }}</div></div>
|
||||
<div class="label">{{ item.label }}</div>
|
||||
<div class="on-text">{{ item.work }}</div>
|
||||
<div class="all-text">{{ item.total }}</div>
|
||||
</div>
|
||||
<div class="label">{{ item.name }}</div>
|
||||
</div>
|
||||
<div class="status-flag">
|
||||
<div class="yuan green"></div>
|
||||
@ -59,14 +60,14 @@
|
||||
<div class="item-label item-label-1">工作数量</div>
|
||||
<div class="item-label item-label-2">停机数量</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 class="status-center">
|
||||
<div class="status-center-item">
|
||||
<div class="item-value item-label-1">31台</div>
|
||||
<div class="item-value item-label-2">11台</div>
|
||||
<div class="item-value item-label-3">21台</div>
|
||||
<div class="item-value item-label-4">71种</div>
|
||||
<div class="item-value item-label-1">{{devStatus.work}}台</div>
|
||||
<div class="item-value item-label-2">{{devStatus.stop}}台</div>
|
||||
<div class="item-value item-label-3">{{devStatus.wait}}台</div>
|
||||
<div class="item-value item-label-4">{{devStatus.total}}台</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="centerChart">
|
||||
@ -88,7 +89,7 @@
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<CardVue class="left-container" title="设备利用率">
|
||||
<LineChart />
|
||||
<LineChart :data="rateData"/>
|
||||
</CardVue>
|
||||
<CardVue class="left-container" title="设备提醒">
|
||||
|
||||
@ -120,21 +121,22 @@ import u156 from './image/u156.png'
|
||||
import u157 from './image/u157.png'
|
||||
import u158 from './image/u158.png'
|
||||
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({
|
||||
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>'],//, '故障率'
|
||||
headerBGC: 'transparent',
|
||||
oddRowBGC: 'transparent',
|
||||
evenRowBGC: 'transparent',
|
||||
rowNum: 10,
|
||||
columnWidth: [260, 160, 180, 180, 180, 180],
|
||||
columnWidth: [180, 280, 180, 180, 120, 120],
|
||||
align: ['center', 'center', 'center', 'center', 'center', 'center'],
|
||||
data: [],
|
||||
rawData: []
|
||||
@ -151,23 +153,104 @@ let remindConfig = reactive({
|
||||
oddRowBGC: 'transparent',
|
||||
evenRowBGC: 'transparent',
|
||||
rowNum: 6,
|
||||
columnWidth: [160, 260, 180, 180, 180, 240],
|
||||
columnWidth: [300, 120, 180, 180, 180, 100],
|
||||
align: ['center', 'center', 'center', 'center', 'center', 'center'],
|
||||
data: [],
|
||||
rawData: []
|
||||
})
|
||||
|
||||
let scrollBoardConfig_data = ref([
|
||||
['电子套结机', '123456', '123456', '123456', `<div style="width:100%;height:100%;display:flex;justify-content: space-around;
|
||||
align-items: center;"><img src="${u158}" width="32" height="32">`],
|
||||
['电子套结机', '123456', '123456', '123456', '123456'],
|
||||
['电子套结机', '123456', '123456', '123456', '123456'],
|
||||
['电子套结机', '123456', '123456', '123456', '123456'],
|
||||
['电子套结机', '123456', '123456', '123456', '123456'],
|
||||
['电子套结机', '123456', '123456', '123456', '123456'],
|
||||
let devStatus = reactive({
|
||||
"wait": 0,
|
||||
"total": 0,
|
||||
"stop": 0,
|
||||
"rate": 0,
|
||||
"work": 0,
|
||||
"devTypes": [ ]
|
||||
})
|
||||
|
||||
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([
|
||||
['abc', '模板缝纫机', '上油', '张三', '2025-02-19'],
|
||||
['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(() => {
|
||||
sortBarChartData.value = [
|
||||
|
||||
{ name: '缝纫设备1', value: 120 },
|
||||
{ name: '缝纫设备2', value: 200 },
|
||||
{ name: '缝纫设备3', value: 150 },
|
||||
{ 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 },
|
||||
]
|
||||
getListDevice()
|
||||
getlistElect()
|
||||
getelectMonitoring()
|
||||
getdeviceStatus()
|
||||
getdeviceRate()
|
||||
|
||||
|
||||
})
|
||||
@ -331,18 +411,19 @@ onUnmounted(() => {
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
width: 1px;
|
||||
height: 54px;
|
||||
border: #f9f8f4 solid 1px;
|
||||
position: absolute;
|
||||
transform: rotate(30deg);
|
||||
top: 0px;
|
||||
left: 61px;
|
||||
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
width: 1px;
|
||||
height: 54px;
|
||||
border: #f9f8f4 solid 1px;
|
||||
position: absolute;
|
||||
transform: rotate(30deg);
|
||||
top: 0px;
|
||||
left: 61px;
|
||||
|
||||
}
|
||||
|
||||
.on-text {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
@ -353,6 +434,7 @@ onUnmounted(() => {
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.all-text {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
@ -364,6 +446,7 @@ onUnmounted(() => {
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
@ -383,6 +466,7 @@ onUnmounted(() => {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.yuan {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
@ -396,6 +480,7 @@ onUnmounted(() => {
|
||||
.blue {
|
||||
background-color: #21dadb;
|
||||
}
|
||||
|
||||
.flag-text {
|
||||
color: #f9f8f4;
|
||||
font-size: 18px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user