學習前端還是非常有意思的，因為前端真的是可見即所得，可以做出來非常好看漂亮的頁面，最近我就在使用前端技術 做一些大屏報表，在制作這些大屏報表過程中，又熟練的練習了自己的學到的相關的前端技術，接下來把做出來的效果 分享給大家。
使用的技術是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>

目錄截圖：