智能工厂生产监控大屏-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>

目录截图：