<template>
<div class="production-dashboard">
<!-- 顶部导航（含日期、页面切换） -->
<div class="top-bar">
<div class="weather-info">
<span>{{ currentTime }}</span>
<span>{{ currentDate }}</span>
</div>
<!-- 标题区域 -->
<div class="title-section">
<h2 class="title">生产能力评估</h2>
</div>
<div class="page-switch">
<el-button type="text" icon="el-icon-s-home"></el-button>
<el-button type="text" icon="el-icon-s-home"></el-button>
<el-button type="text" icon="el-icon-s-home">放大</el-button>
<el-button type="text" icon="el-icon-switch-button">关闭</el-button>
</div>
</div>
<div class="button-container">
<!-- 左侧三个朝右的平行四边形按钮 -->
<div class="left-buttons">
<button
class="skew-button-left"
:class="{ active: activeButton === '设备总览' }"
@click="handleButtonClick('设备总览')"
>
设备总览
</button>
<button
class="skew-button-left"
:class="{ active: activeButton === '菜单二' }"
@click="handleButtonClick('菜单二')"
>
菜单二
</button>
<button
class="skew-button-left"
:class="{ active: activeButton === '菜单三' }"
@click="handleButtonClick('菜单三')"
>
菜单三
</button>
</div>
<!-- 右侧三个朝左的平行四边形按钮 -->
<div class="right-buttons">
<button
class="skew-button-right"
:class="{ active: activeButton === '菜单四' }"
@click="handleButtonClick('菜单四')"
>
菜单四
</button>
<button
class="skew-button-right"
:class="{ active: activeButton === '菜单五' }"
@click="handleButtonClick('菜单五')"
>
菜单五
</button>
<button
class="skew-button-right"
:class="{ active: activeButton === '菜单六' }"
@click="handleButtonClick('菜单六')"
>
菜单六
</button>
</div>
</div>
<div class="workshop-buttons">
<button
v-for="(workshop, index) in workshops"
:key="index"
:class="['workshop-btn', activeWorkshop === index ? 'active' : '']"
@click="selectWorkshop(index)"
>
{{ workshop }}
</button>
</div>
<div class="container">
<div class="row">
<!-- 卡片 1 -->
<div class="card">
<div class="card-left">
<img src="@/views/product/img/shebeikaidonglv.png">
</div>
<div class="card-right">
<p>良好台数 <span class="yellow-number">1</span></p>
<p>正常台数 <span class="green-number">13</span></p>
<p>告警台数 <span class="red-number">1</span></p>
</div>
</div>
<!-- 卡片 2 -->
<div class="card">
<div class="card-left">
<img src="@/views/product/img/xingneng.png">
</div>
<div class="card-right">
<p>良好台数 <span class="red-number">0</span></p>
<p>正常台数 <span class="green-number">15</span></p>
<p>告警台数 <span class="yellow-number">0</span></p>
</div>
</div>
<!-- 卡片 3 -->
<div class="card">
<div class="card-left">
<img src="@/views/product/img/oeede.png">
</div>
<div class="card-right">
<p>良好台数 <span class="red-number">1</span></p>
<p>正常台数 <span class="green-number">13</span></p>
<p>告警台数 <span class="yellow-number">1</span></p>
</div>
</div>
</div>
</div>
<div class="app-container">
<!-- 循环生成 3 行 -->
<div v-for="row in 3" :key="row" class="card-row">
<!-- 每行循环生成 5 个加工中心卡片 -->
<div
v-for="col in 5"
:key="`${row}-${col}`"
class="processing-card"
@click="navigateToDetail((row - 1) * 5 + col)"
@mouseenter="hoverCard = (row - 1) * 5 + col"
@mouseleave="hoverCard = null"
:class="{ 'card-hover': hoverCard === (row - 1) * 5 + col }"
>
<!-- 加工中心标题，根据行和列计算编号 -->
<h3 class="card-title">加工中心{{ formatNumber((row-1)*5 + col) }}</h3>
<div class="metrics">
<!-- 设备开动率指标 -->
<div class="metric flex justify-between items-center" >
<span class="label">设备开动率</span>
<div class="progress-bar w-3/4" id="progress-outer">
<div
class="progress"
:style="{
width: equipmentPowerRateList[(row - 1) * 5 + col - 1],
backgroundColor: getColor(equipmentPowerRateList[(row - 1) * 5 + col - 1])
}"
>
<!-- arrow -->
<span class="arrow"></span>
</div>
<!-- 显示百分比文本 -->
<span class="progress-text">{{ equipmentPowerRateList[(row - 1) * 5 + col - 1] }}</span>
</div>
</div>
<!-- 性能指数指标 -->
<div class="metric flex justify-between items-center">
<span class="label">性能指数</span>
<div class="progress-bar w-3/4" id="progress-outer">
<div
class="progress"
:style="{
width: performanceIndexList[(row - 1) * 5 + col - 1],
backgroundColor: getColor(performanceIndexList[(row - 1) * 5 + col - 1])
}"
>
<!-- arrow -->
<span class="arrowt"></span>
</div>
<!-- 显示百分比文本 -->
<span class="progress-text">{{ performanceIndexList[(row - 1) * 5 + col - 1] }}</span>
</div>
</div>
<!-- OEE 指标 -->
<div class="metric flex justify-between items-center">
<span class="label">OEE</span>
<div class="progress-bar w-3/4" id="progress-outer">
<div
class="progress"
:style="{
width: oeeList[(row - 1) * 5 + col - 1],
backgroundColor: getColor(oeeList[(row - 1) * 5 + col - 1])
}"
>
<!-- arrow -->
<span class="arrow"></span>
</div>
<!-- 显示百分比文本 -->
<span class="progress-text">{{ oeeList[(row - 1) * 5 + col - 1] }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'ProductionDashboard',
name: 'App',
data() {
return {
// 顶部信息
temperature: '23.5',
currentTime: '18:53:39',
currentDate: '2025年7月14日',
// 菜单状态
activeMenu: '设备总览',
activeWorkshop: '国合车间',
workshops: ['国合车间', '大件车间', '小件车间'],
// 默认选中第一个
activeWorkshop: 0 ,
activeButton: '设备总览' ,
// 设备开动率固定数值列表，按加工中心顺序排列
equipmentPowerRateList: [
'55%', '30%', '80%', '80%', '80%',
'80%', '80%', '80%', '80%', '80%',
'80%', '80%', '80%', '80%', '80%'
],
// 性能指数固定数值列表，按加工中心顺序排列
performanceIndexList: [
'83%', '83%', '90%', '90%', '90%',
'90%', '90%', '90%', '90%', '90%',
'90%', '90%', '90%', '90%', '90%'
],
// OEE 固定数值列表，按加工中心顺序排列
oeeList: [
'30%', '55%', '71%', '71%', '71%',
'71%', '71%', '71%', '71%', '71%',
'71%', '71%', '71%', '71%', '71%'
],
hoverCard: null, // 记录当前悬停的卡片ID
};
},
created() {
// 初始化时间
this.updateDateTime();
setInterval(this.updateDateTime, 1000);
},
methods: {
// 更新时间
updateDateTime() {
const now = new Date();
this.currentTime = now.toTimeString().split(' ')[0];
this.currentDate = `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日 ${['日', '一', '二', '三', '四', '五', '六'][now.getDay()]} 星期`;
},
selectWorkshop(index) {
this.activeWorkshop = index;
},
handleButtonClick(buttonName) {
this.activeButton = buttonName;
console.log(`点击了: ${buttonName}`);
},
getColor(rate) {
const percent = parseInt(rate);
if (percent < 50) return '#C84D53'; // 红色
if (percent < 70) return '#C4A543'; // 橙色
return '#5CC352'; // 绿色
},
// 格式化数字为两位数（不足两位时前面补零）
formatNumber(num) {
return num.toString().padStart(2, '0');
},
navigateToDetail(machineId) {
console.log(`跳转到加工中心${machineId}详情页`);
// 实际项目中使用路由跳转：
// this.$router.push({ name: 'MachineDetail', params: { id: machineId } });
},
}
};
</script>
<style scoped>
/* 整体样式 */
.production-dashboard {
background-color: #113231;
color: white;
min-height: 100vh;
padding: 0px;
min-width: 1200px; /* 设置页面最小宽度，超出屏幕时触发全局滚动 */
box-sizing: border-box;
}
/* 顶部导航（日期和页面切换） */
.top-bar {
display: flex;
justify-content: space-between;
align-items: center;
background: #003333;
background: #003333 url('@/views/product/img/top-background.png') center/cover no-repeat;
padding: 20px 10px;
height: 40px;
background-position: center;
border-radius: 6px;
}
.weather-info {
display: flex;
gap: 15px;
font-size: 10px;
align-items: center;
}
.page-switch {
gap: 50px; /* 调整页面切换按钮间距 */
font-size: 10px;
}
/* 标题区域 */
.title-section {
margin-left: -100px;
}
.title {
font-size: 17px;
font-weight:700;
margin-top: 15px;
letter-spacing: 5px;
background: linear-gradient(to right, #3eb2dc, #ffffff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-family: "Microsoft YaHei", sans-serif; /* 微软雅黑 */
}
.button-container {
display: flex;
justify-content: space-between;
margin: 15px 0;
}
.left-buttons, .right-buttons {
display: flex;
gap: 2px;
margin-top: -18px;
}
.right-buttons{
margin-right: 150px;
}
.left-buttons{
margin-left: 150px;
}
/* 朝右的平行四边形按钮 */
.skew-button-right {
position: relative;
background-color: #3f7870;
color: white;
border: none;
padding: 2px 2px;
font-size: 8px;
cursor: pointer;
transform: skew(-15deg); /* 整体倾斜 */
transition: all 0.2s;
margin-left: 0px;
margin-right: 10px;
width: 40px;
height: 20px;
box-shadow: 0 0 5px rgba(60, 175, 172, 0.5);
}
.skew-button-right:hover {
background-color: #3cafac;
}
.skew-button-right span {
display: inline-block;
transform: skew(15deg); /* 文字反方向倾斜，恢复正常 */
}
/* 朝左的平行四边形按钮 */
.skew-button-left {
position: relative;
background-color: #3f7870;
color: white;
border: none;
padding: 2px 2px;
font-size: 8px;
cursor: pointer;
transform: skew(15deg); /* 整体朝相反方向倾斜 */
transition: all 0.2s;
margin-left: 10px;
width: 40px;
height: 20px;
box-shadow: 0 0 5px rgba(60, 175, 172, 0.5);
}
.skew-button-left:hover {
background-color: #3cafac;
}
.skew-button-left span {
display: inline-block;
transform: skew(-15deg); /* 文字反方向倾斜，恢复正常 */
}
/* 选中状态样式 */
.skew-button-right.active, .skew-button-left.active {
background-color: #3cafac;
box-shadow: 0 0 5px rgba(60, 175, 172, 0.5);
}
.workshop-buttons {
display: flex;
justify-content: center;
gap: 15px; /* 按钮间距 */
margin: -12px 0;
}
.workshop-btn {
background: transparent;
border: none;
border-bottom: 2px solid transparent; /* 初始下边框透明 */
color: white;
font-size: 10px;
padding: 5px 10px;
cursor: pointer;
transition: all 0.3s;
}
.workshop-btn.active {
border-bottom-color: #FF9900; /* 选中时下边框为橙色 */
color: #FF9900; /* 选中时文字为橙色 */
font-weight: 500;
}
.workshop-btn:hover:not(.active) {
border-bottom-color: rgba(255, 153, 0, 0.5); /* 悬停时半透明橙色下边框 */
transition: border-color 0.3s;
}
.container {
width: 600px;
margin: 0 auto;
padding: 20px;
height: 100px;
}
.row {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card {
flex: 1;
min-width: 150px;
display: flex;
border: 1px solid #104D4E;
border-radius: 8px;
overflow: auto;
box-shadow: 0 0 5px rgba(23, 103, 104, 0.845);
}
.card-left {
width: 50%; /* 左侧占比 */
background-color: #003331;
background-image: url();
height: 80px;
}
.card-right {
width: 50%; /* 右侧占比 */
background-color: #003331;
color: white; /* 文字默认白色 */
border-radius: 4px;
padding: 5px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* 行间距控制 */
.card-right p {
margin: 7px 8px; /* 上下各5px距，确保三行分明 */
font-size: 10px;
}
/* 数字颜色样式 */
.red-number {
color: #FF4949; /* 红色数字 */
margin-left: 5px; /* 与文字保持一点距离 */
}
.green-number {
color: #00CC00; /* 绿色数字 */
margin-left: 5px;
}
.yellow-number {
color: #FF9900; /* 黄色数字 */
margin-left: 5px;
}
.app-container {
display: flex;
flex-direction: column;
gap: 15px;
padding: 20px;
min-width: 1200px;
max-height: 600px;
margin: 0 auto;
overflow-y: auto;
}
.card-row {
display: flex;
gap: 30px;
overflow-x: auto;
padding-bottom: 10px;
margin: 0 auto;
}
.card-title {
margin: 0 0 6px 0;
font-size: 14px;
font-weight: normal;
}
.metrics {
display: flex;
flex-direction: column;
gap: 6px;
}
.metric {
display: flex;
align-items: center;
justify-content: space-between;
}
.label {
font-size: 10px;
margin-bottom: 4px;
width: 110px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.progress-bar {
width: 100%;
height: 12px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 6px;
}
.progress {
height: 12px;
transition: width 0.5s ease;
display: flex;
align-items: center;
justify-content: flex-end; /* 让箭头在进度条内部靠右 */
padding-right: 4px; /* 给箭头和进度条边缘留间距 */
border-radius: 6px;
}
.progress-text {
font-size: 9px;
color: white;
margin-left: 2px; /* 与进度条保持间距 */
}
#progress-outer {
display: flex;
align-items: center;
}
.arrow {
font-size: 10px;
color: white;
}
.processing-card {
flex: 0 0 180px;
background-color: #0b3b3a;
color: white;
border-radius: 8px;
padding: 12px;
font-family: "宋体", SimSun, serif;
transition: all 0.3s ease; /* 添加过渡效果 */
cursor: pointer; /* 鼠标指针样式 */
}
/* 卡片悬浮效果 */
.card-hover {
transform: translateY(-2px); /* 向上浮动 */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* 阴影效果 */
background-color: #0e4c4b; /* 背景色变化 */
}
</style>
vue中左右滚动条不出现怎么办
扫一扫
3032
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
