|
|
@@ -0,0 +1,311 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <!-- 顶部标题栏 -->
|
|
|
+ <div class="page-header">
|
|
|
+ <div class="page-title">生产总览</div>
|
|
|
+ <div class="page-time">时间：{{ currentTime }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 顶部统计卡片 -->
|
|
|
+ <el-row :gutter="20" class="panel-group">
|
|
|
+ <el-col :span="3">
|
|
|
+ <div class="card-panel">
|
|
|
+ <div class="card-panel-icon-wrapper" style="background: #E7F1FF;">
|
|
|
+ <svg-icon icon-class="order" class="card-panel-icon" />
|
|
|
+ </div>
|
|
|
+ <div class="card-panel-description">
|
|
|
+ <div class="card-panel-text">本月总订单</div>
|
|
|
+ <count-to :start-val="0" :end-val="20" :duration="2000" class="card-panel-num"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="3">
|
|
|
+ <div class="card-panel">
|
|
|
+ <div class="card-panel-icon-wrapper" style="background: #E8FFF3;">
|
|
|
+ <svg-icon icon-class="produced" class="card-panel-icon" />
|
|
|
+ </div>
|
|
|
+ <div class="card-panel-description">
|
|
|
+ <div class="card-panel-text">本月已生产订单</div>
|
|
|
+ <count-to :start-val="0" :end-val="5" :duration="2000" class="card-panel-num"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="3">
|
|
|
+ <div class="card-panel">
|
|
|
+ <div class="card-panel-icon-wrapper" style="background: #E6FFFB;">
|
|
|
+ <svg-icon icon-class="producing" class="card-panel-icon" />
|
|
|
+ </div>
|
|
|
+ <div class="card-panel-description">
|
|
|
+ <div class="card-panel-text">正在生产订单</div>
|
|
|
+ <count-to :start-val="0" :end-val="8" :duration="2000" class="card-panel-num"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="3">
|
|
|
+ <div class="card-panel">
|
|
|
+ <div class="card-panel-icon-wrapper" style="background: #FFF7E6;">
|
|
|
+ <svg-icon icon-class="unproduced" class="card-panel-icon" />
|
|
|
+ </div>
|
|
|
+ <div class="card-panel-description">
|
|
|
+ <div class="card-panel-text">未生产</div>
|
|
|
+ <count-to :start-val="0" :end-val="7" :duration="2000" class="card-panel-num"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="card-panel">
|
|
|
+ <div class="card-panel-icon-wrapper" style="background: #F0E6FF;">
|
|
|
+ <svg-icon icon-class="total" class="card-panel-icon" />
|
|
|
+ </div>
|
|
|
+ <div class="card-panel-description">
|
|
|
+ <div class="card-panel-text">订单总量</div>
|
|
|
+ <count-to :start-val="0" :end-val="1000" :duration="2000" class="card-panel-num"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="card-panel">
|
|
|
+ <div class="card-panel-icon-wrapper" style="background: #E6FFF6;">
|
|
|
+ <svg-icon icon-class="completed" class="card-panel-icon" />
|
|
|
+ </div>
|
|
|
+ <div class="card-panel-description">
|
|
|
+ <div class="card-panel-text">已完成量</div>
|
|
|
+ <count-to :start-val="0" :end-val="5000" :duration="2000" class="card-panel-num"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="card-panel">
|
|
|
+ <div class="card-panel-icon-wrapper" style="background: #FFE6E6;">
|
|
|
+ <svg-icon icon-class="uncompleted" class="card-panel-icon" />
|
|
|
+ </div>
|
|
|
+ <div class="card-panel-description">
|
|
|
+ <div class="card-panel-text">未完成量</div>
|
|
|
+ <count-to :start-val="0" :end-val="5000" :duration="2000" class="card-panel-num"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 生产概况表格 -->
|
|
|
+ <el-card class="box-card" style="margin-top: 20px;">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>生产概况</span>
|
|
|
+ <el-tag type="primary" style="float: right;">当前数量：7条</el-tag>
|
|
|
+ </div>
|
|
|
+ <el-table :data="tableData" style="width: 100%">
|
|
|
+ <el-table-column prop="orderNo" label="订单编号" width="120"/>
|
|
|
+ <el-table-column prop="productName" label="商品名称" width="120"/>
|
|
|
+ <el-table-column prop="status" label="生产状态" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tag :type="scope.row.status === '已完成' ? 'success' : 'warning'">
|
|
|
+ {{ scope.row.status }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="progress" label="进度">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-progress :percentage="scope.row.progress" :color="scope.row.progressColor"/>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="total" label="计划量" width="100"/>
|
|
|
+ <el-table-column prop="finished" label="已完成量" width="100"/>
|
|
|
+ <el-table-column prop="unfinished" label="未完成量" width="100"/>
|
|
|
+ <el-table-column prop="rate" label="完成率" width="100"/>
|
|
|
+ <el-table-column prop="remainingDays" label="剩余完成时间" width="120"/>
|
|
|
+ </el-table>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <!-- 月度生产概况图表 -->
|
|
|
+ <el-card class="box-card" style="margin-top: 20px;">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>月度生产概况</span>
|
|
|
+ </div>
|
|
|
+ <div class="chart-wrapper">
|
|
|
+ <bar-chart :chart-data="chartData"/>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import CountTo from 'vue-count-to'
|
|
|
+import BarChart from './components/BarChart'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'ProductionSummary',
|
|
|
+ components: {
|
|
|
+ CountTo,
|
|
|
+ BarChart
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ currentTime: '',
|
|
|
+ tableData: [
|
|
|
+ {
|
|
|
+ orderNo: '00000001',
|
|
|
+ productName: '包装材料',
|
|
|
+ status: '进行中',
|
|
|
+ progress: 22.5,
|
|
|
+ progressColor: '#409EFF',
|
|
|
+ total: 4000,
|
|
|
+ finished: 900,
|
|
|
+ unfinished: 3100,
|
|
|
+ rate: '22.5%',
|
|
|
+ remainingDays: '7天'
|
|
|
+ },
|
|
|
+ // 其他数据项...
|
|
|
+ ],
|
|
|
+ chartData: {
|
|
|
+ labels: ['包装材料', '包装材料', '板材类', '橡胶类型', '塑料类型', '特定订单', '无规格类型'],
|
|
|
+ datasets: [
|
|
|
+ {
|
|
|
+ label: '计划量',
|
|
|
+ data: [500, 2000, 600, 1200, 600, 1400, 500, 1600],
|
|
|
+ backgroundColor: '#409EFF'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '完成量',
|
|
|
+ data: [400, 1600, 500, 900, 400, 1200, 500, 1600],
|
|
|
+ backgroundColor: '#67C23A'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.updateTime()
|
|
|
+ setInterval(this.updateTime, 1000)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ updateTime() {
|
|
|
+ const now = new Date()
|
|
|
+ this.currentTime = now.getFullYear() + '年' +
|
|
|
+ (now.getMonth() + 1) + '月' +
|
|
|
+ now.getDate() + '日'
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.page-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20px 24px;
|
|
|
+ background: #fff;
|
|
|
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
|
|
+ margin-bottom: 24px;
|
|
|
+ border-radius: 8px;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+
|
|
|
+ .page-title {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #1f2d3d;
|
|
|
+ position: relative;
|
|
|
+ padding-left: 16px;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ width: 4px;
|
|
|
+ height: 22px;
|
|
|
+ background: #409EFF;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .page-time {
|
|
|
+ color: #606266;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.panel-group {
|
|
|
+ margin-top: 24px;
|
|
|
+
|
|
|
+ .card-panel {
|
|
|
+ height: 108px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 12px;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ color: #666;
|
|
|
+ background: #fff;
|
|
|
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 20px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ transform: translateY(-2px);
|
|
|
+ box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-panel-icon-wrapper {
|
|
|
+ float: left;
|
|
|
+ margin: 0;
|
|
|
+ padding: 16px;
|
|
|
+ transition: all 0.3s ease-out;
|
|
|
+ border-radius: 50%;
|
|
|
+ width: 56px;
|
|
|
+ height: 56px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-panel-icon {
|
|
|
+ float: left;
|
|
|
+ font-size: 28px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-panel-description {
|
|
|
+ float: right;
|
|
|
+ font-weight: bold;
|
|
|
+ margin: 8px 0 0 16px;
|
|
|
+
|
|
|
+ .card-panel-text {
|
|
|
+ line-height: 20px;
|
|
|
+ color: #606266;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-panel-num {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #1f2d3d;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.chart-wrapper {
|
|
|
+ background: #fff;
|
|
|
+ padding: 24px;
|
|
|
+ margin-bottom: 32px;
|
|
|
+ height: 400px;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
|
|
+}
|
|
|
+
|
|
|
+// 优化表格卡片样式
|
|
|
+.box-card {
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
|
|
+ transition: all 0.3s ease;
|
|
|
+
|
|
|
+ .el-card__header {
|
|
|
+ padding: 20px 24px;
|
|
|
+ border-bottom: 1px solid #ebeef5;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
aiwenzhu