智能工厂生产监控大屏-vue纯前端静态页面练习

学习前端还是非常有意思的，因为前端真的是可见即所得，可以做出来非常好看漂亮的页面，最近我就在使用前端技术 做一些大屏报表，在制作这些大屏报表过程中，又熟练的练习了自己的学到的相关的前端技术，接下来把做出来的效果 分享给大家。
使用的技术是vue2 + element-ui
· Vue2：
· Element-UI：
· ECharts：
· Node版本 16.20
安装依赖：npm i
运行项目：npm run serve
打包项目：npm run build
介绍了使用的技术后，接下来给大家看一下页面效果，



一共做了大概四个页面的 页面 页面需求主要是实现的对工厂的一种数据大屏的统计和展示，让大家通过大屏报表可以一目了然的看到工厂里的使用情况。
因为是练习前端项目，所以是个纯前端的页面，没有对接后端。
有兴趣学习的小伙伴可以去看看~
源码地址:
https://wwwoop.com/home/Index/projectInfo?goodsId=105&typeParam=2&subKey=1

部分代码：

<template><div class="equipment-monitor"><div class="monitor-header"><data-card v-for="(card, index) in equipmentCards" :key="index":title="card.title":value="card.value":unit="card.unit":icon="card.icon":value-color="card.valueColor":footer="card.footer":trend-type="card.trendType":trend-value="card.trendValue"/></div><div class="monitor-content"><div class="equipment-status"><div class="status-header"><h3>设备运行状态</h3><div class="status-legend"><span class="legend-item"><span class="dot running"></span>运行中</span><span class="legend-item"><span class="dot idle"></span>空闲</span><span class="legend-item"><span class="dot maintenance"></span>维护中</span><span class="legend-item"><span class="dot fault"></span>故障</span></div></div><div class="equipment-list"><div v-for="(item, index) in equipmentList" :key="index"class="equipment-item"><div class="equipment-name">{{ item.name }}</div><div class="equipment-info"><div class="status-indicator" :class="item.status"></div><div class="equipment-details"><div class="detail-item"><span class="label">运行时间:</span><span class="value">{{ item.runTime }}</span></div><div class="detail-item"><span class="label">效率:</span><span class="value">{{ item.efficiency }}%</span></div><div class="detail-item"><span class="label">温度:</span><span class="value" :class="{'warning': item.temperature > 75}">{{ item.temperature }}°C</span></div></div></div></div></div></div><div class="monitor-charts"><div class="chart-row"><div class="chart-item"><pie-chart title="设备状态分布" :data="equipmentStatusData"height="250px"/></div><div class="chart-item"><line-chart title="设备运行效率趋势" :x-data="efficiencyTrendData.xData" :series="efficiencyTrendData.series"height="250px"/></div></div><div class="chart-item maintenance-chart"><bar-chart title="设备维护记录" :x-data="maintenanceData.xData" :series="maintenanceData.series"height="250px"/></div></div></div></div>
</template><script>
// 作者：json
import DataCard from '../components/DataCard.vue'
import LineChart from '../components/charts/LineChart.vue'
import BarChart from '../components/charts/BarChart.vue'
import PieChart from '../components/charts/PieChart.vue'export default {name: 'EquipmentMonitor',components: {DataCard,LineChart,BarChart,PieChart},data() {return {// 顶部卡片数据equipmentCards: [{title: '设备总数',value: '42',unit: '台',icon: 'el-icon-s-platform',valueColor: '#40a9ff'},{title: '运行设备',value: '36',unit: '台',icon: 'el-icon-s-operation',valueColor: '#52c41a',footer: '运行率',trendType: 'up',trendValue: '85.7%'},{title: '故障设备',value: '2',unit: '台',icon: 'el-icon-warning',valueColor: '#f5222d',footer: '较昨日',trendType: 'down',trendValue: '1台'},{title: '设备健康度',value: '92.5',unit: '%',icon: 'el-icon-s-help',valueColor: '#faad14',footer: '较上月',trendType: 'up',trendValue: '1.2%'}],// 设备列表equipmentList: [{name: '注塑机 #1',status: 'running',runTime: '12h 45m',efficiency: 96,temperature: 68},{name: '注塑机 #2',status: 'running',runTime: '8h 30m',efficiency: 94,temperature: 72},{name: '装配线 #1',status: 'running',runTime: '10h 15m',efficiency: 92,temperature: 65},{name: '装配线 #2',status: 'idle',runTime: '0h 0m',efficiency: 0,temperature: 45},{name: '包装机 #1',status: 'running',runTime: '11h 20m',efficiency: 90,temperature: 62},{name: '包装机 #2',status: 'maintenance',runTime: '0h 0m',efficiency: 0,temperature: 40},{name: '测试设备 #1',status: 'running',runTime: '9h 50m',efficiency: 95,temperature: 58},{name: '测试设备 #2',status: 'fault',runTime: '0h 0m',efficiency: 0,temperature: 82}],// 设备状态分布equipmentStatusData: [{ value: 36, name: '运行中', itemStyle: { color: '#52c41a' } },{ value: 2, name: '空闲', itemStyle: { color: '#40a9ff' } },{ value: 2, name: '维护中', itemStyle: { color: '#faad14' } },{ value: 2, name: '故障', itemStyle: { color: '#f5222d' } }],// 效率趋势数据efficiencyTrendData: {xData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],series: [{name: '设备效率',data: [88, 86, 90, 89, 91, 90, 92, 93, 91, 94, 93, 95],color: '#40a9ff'}]},// 维护记录数据maintenanceData: {xData: ['注塑机', '装配线', '包装机', '测试设备', '物流设备', '其他'],series: [{name: '计划维护',data: [5, 3, 4, 2, 3, 1],color: '#40a9ff'},{name: '紧急维护',data: [2, 1, 2, 1, 0, 1],color: '#f5222d'}]}}}
}
</script><style scoped>
.equipment-monitor {height: 100%;display: flex;flex-direction: column;
}.monitor-header {display: grid;grid-template-columns: repeat(4, 1fr);gap: 15px;margin-bottom: 15px;
}.monitor-content {flex: 1;display: grid;grid-template-columns: 40% 60%;gap: 15px;overflow: hidden;
}.equipment-status {background: rgba(6, 30, 93, 0.5);border: 1px solid #1d4584;border-radius: 4px;padding: 15px;display: flex;flex-direction: column;
}.status-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 15px;
}.status-header h3 {color: #40a9ff;margin: 0;font-size: 16px;
}.status-legend {display: flex;gap: 10px;
}.legend-item {display: flex;align-items: center;font-size: 12px;color: rgba(255, 255, 255, 0.7);
}.dot {width: 8px;height: 8px;border-radius: 50%;margin-right: 5px;
}.dot.running {background-color: #52c41a;
}.dot.idle {background-color: #40a9ff;
}.dot.maintenance {background-color: #faad14;
}.dot.fault {background-color: #f5222d;
}.equipment-list {flex: 1;overflow-y: auto;display: grid;grid-template-columns: repeat(2, 1fr);gap: 10px;
}.equipment-item {background: rgba(6, 30, 93, 0.3);border: 1px solid rgba(29, 69, 132, 0.5);border-radius: 4px;padding: 10px;
}.equipment-name {font-weight: bold;margin-bottom: 10px;color: #fff;
}.equipment-info {display: flex;align-items: center;
}.status-indicator {width: 12px;height: 12px;border-radius: 50%;margin-right: 10px;
}.status-indicator.running {background-color: #52c41a;box-shadow: 0 0 5px #52c41a;
}.status-indicator.idle {background-color: #40a9ff;box-shadow: 0 0 5px #40a9ff;
}.status-indicator.maintenance {background-color: #faad14;box-shadow: 0 0 5px #faad14;
}.status-indicator.fault {background-color: #f5222d;box-shadow: 0 0 5px #f5222d;animation: blink 1s infinite;
}@keyframes blink {0% { opacity: 1; }50% { opacity: 0.5; }100% { opacity: 1; }
}.equipment-details {flex: 1;
}.detail-item {display: flex;justify-content: space-between;font-size: 12px;margin-bottom: 5px;
}.detail-item .label {color: rgba(255, 255, 255, 0.7);
}.detail-item .value {color: #fff;
}.detail-item .value.warning {color: #f5222d;
}.monitor-charts {display: flex;flex-direction: column;gap: 15px;
}.chart-row {display: grid;grid-template-columns: repeat(2, 1fr);gap: 15px;
}.maintenance-chart {height: 250px;
}
</style>

目录截图：