首页

src/views/home/data.js

@@ -0,0 +1,267 @@
+// 引入Day.js库
+const dayjs = require('dayjs');
+// 获取本月日期列表的函数
+function getDatesInMonth() {
+    let year = dayjs().year()
+    let month = dayjs().month()
+    const dates = [];
+    const startDate = dayjs(new Date(year, month, 1));
+    const endDate = dayjs(new Date(year, month + 1, 1)).subtract(1, 'day');
+    let currentDate = startDate;
+    while (currentDate.isBefore(endDate) || currentDate.isSame(endDate, 'day')) {
+        dates.push(currentDate.format('YYYY-MM-DD'));
+        currentDate = currentDate.add(1, 'day');
+    }
+    return dates;
+}
+export const columns = [
+
+    {
+        columnKey: 'index',
+        label: '序号',
+        type: 'index',
+        width: 55,
+        align: 'center',
+        showOverflowTooltip: true,
+        fixed: 'left'
+    },
+    {
+        prop: 'name',
+        label: '生产订单名称',
+        align: 'center',
+        showOverflowTooltip: true,
+    },
+    {
+        prop: 'name',
+        label: '生产订单编号',
+        align: 'center',
+        showOverflowTooltip: true,
+    },
+    {
+        prop: 'name1',
+        label: '订单状态',
+        align: 'center',
+        showOverflowTooltip: true,
+    },
+    {
+        prop: 'qualified',
+        label: '计划开始日期',
+        minWidth: '120',
+        align: 'center',
+        showOverflowTooltip: true,
+    },
+    {
+        prop: 'qualified',
+        label: '计划完成日期',
+        minWidth: '120',
+        align: 'center',
+        showOverflowTooltip: true,
+    },
+    {
+        prop: 'name12',
+        label: '产品名称',
+        align: 'center',
+        showOverflowTooltip: true,
+    }, {
+        prop: 'name12',
+        label: '产品编码',
+        align: 'center',
+        showOverflowTooltip: true,
+    }, {
+        prop: 'name12',
+        label: '规格型号',
+        align: 'center',
+        showOverflowTooltip: true,
+    }, {
+        prop: 'name12',
+        label: '数量（个）',
+        align: 'center',
+        showOverflowTooltip: true,
+    }, {
+        prop: 'name12',
+        label: '生产单位',
+        align: 'center',
+        showOverflowTooltip: true,
+    }, {
+        prop: 'name12',
+        label: '交期状态',
+        align: 'center',
+        showOverflowTooltip: true,
+    },
+
+];
+export const lineOption = (data, itemStyle = {}) => {
+    return {
+        tooltip: {
+            formatter: (item) => {
+                return item.name + "：" + item.seriesName + " " + item.value
+            },
+            trigger: 'item'
+        },
+        legend: {
+            // bottom: '2%',
+            itemGap: window.innerHeight * 0.014,
+
+            textStyle: {
+                fontSize: window.innerHeight * 0.013,
+            }
+        },
+        grid: {
+            left: 40,
+            bottom: "13%"//也可设置left和right设置距离来控制图表的大小
+        },
+        color: ['#1890ff'],
+        xAxis: {
+            type: 'category',
+            data: ['10/2', '10/3', '10/4', '10/5', '10/6', '10/7', '10/8'],
+            axisLabel: {
+                fontSize: window.innerHeight * 0.012,
+            }
+
+        },
+        yAxis: [
+            {
+                type: 'value',
+                max: 100,
+                min: 0,
+                axisLabel: {
+                    show: true,
+                    formatter: "{value}%", //右侧Y轴文字显示
+
+                },
+                nameTextStyle: {
+                    align: 'center',
+                    color: "#333",
+                    fontSize: window.innerHeight * 0.012,
+                    padding: [0, 20, -3, 0]
+                },
+            },
+
+        ],
+        series: [
+            {
+                name: '过程控',
+                symbolSize: 10,
+                data: data[0],
+                type: 'line',
+
+                itemStyle: {
+                    // color: '#ffab08'
+                },
+
+            }, {
+                name: '产品控',
+                symbolSize: 10,
+                data: data[1],
+                type: 'line', 
+                itemStyle: {
+                    // color: '#ffab08'
+                },
+
+            }
+        ]
+    }
+}
+export const barOption = ( xData,series) => {
+    return {
+        tooltip: {
+            formatter: (item) => {
+                return item.name + "：" + item.seriesName + " " + item.value
+            },
+            trigger: 'item'
+        },
+        legend: {
+            // bottom: '2%',
+            itemGap: window.innerHeight * 0.014,
+
+            textStyle: {
+                fontSize: window.innerHeight * 0.013,
+            }
+        },
+        grid: {
+            left: 40,
+            right: 55,
+            bottom: "13%"//也可设置left和right设置距离来控制图表的大小
+        },
+        color: ['#1890ff'],
+        xAxis: {
+            type: 'category',
+            data:xData ,
+            axisLabel: {
+                fontSize: window.innerHeight * 0.012,
+
+            }
+
+        },
+        yAxis: [
+            {
+                type: 'value',
+                // name: '(个)',
+                nameTextStyle: {
+                    align: 'center',
+                    color: "#333",
+                    fontSize: window.innerHeight * 0.012,
+                    padding: [0, 20, -3, 0]
+                },
+            },
+            {
+                type: 'value',
+                max: 100,
+                min: 0,
+                axisLabel: {
+                    show: true,
+                    formatter: "{value}%", //右侧Y轴文字显示
+
+                }
+            }
+        ],
+        series 
+    }
+}
+
+export const pieOption = (data) => {
+    return {
+        color: ['#398f4e', '#458ef7', '#fdc537', '#fe6869', '#975fe6'],
+        tooltip: {
+            // formatter: '{b}：{c}' + '%',
+            trigger: 'item'
+        },
+        // legend: {
+        //     orient: 'horizontal',
+        //     left: 'right',
+        //     right: '15%',
+        //     bottom: '5%',
+        //     itemGap: window.innerHeight * 0.018,
+        //     textStyle: {
+        //         fontSize: window.innerHeight * 0.014,
+        //     }
+        // },
+        series: [
+            {
+                center: ['50%', '50%'],
+                label: {
+                    position: 'outside',
+                    show: true,
+                    formatter: (item) => {
+                        return item.name + "：" + item.value+'/'+item.percent +'%'
+                    },
+                    fontSize: window.innerHeight * 0.014,
+                    // color:"#fff"
+                },
+                labelLine: {
+                    show: true,
+
+                },
+                type: 'pie',
+                radius: '70%',
+                itemStyle: {
+                    borderWidth: 0,
+                    shadowBlur: 10,
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                },
+                data
+            }
+        ]
+    }
+}
+

src/views/home/index.vue

@@ -0,0 +1,331 @@
+<template>
+  <div class="ele-body">
+    <el-row :gutter="5">
+      <el-col :span="24" style="height: 46px; margin-bottom: 5px">
+        <el-card class="box-card">
+          <el-radio-group v-model="form.timeType" @change="timeTypeChange">
+            <el-radio-button label="1">企业</el-radio-button>
+            <el-radio-button label="2">工厂</el-radio-button>
+            <el-radio-button label="3">班组</el-radio-button>
+            <el-radio-button label="4">产线</el-radio-button>
+          </el-radio-group>
+        </el-card>
+      </el-col>
+      <el-col :span="8" style="height: 33%">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>计划达成情况</span>
+          </div>
+          <v-chart ref="barRef1" style="height: 100%" :option="barOption" />
+        </el-card>
+      </el-col>
+      <el-col :span="4" style="height: 33%">
+        <div class="item">
+          <div class="header"> 7日内需要交付订单 </div>
+          <div class="content">
+            <p><span>订单数</span><span>3/10</span></p>
+            <p><span>产品量</span><span>558/1860</span></p>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="4" style="height: 33%">
+        <div class="item">
+          <div class="header"> 本月需要完成订单 </div>
+          <div class="content">
+            <p><span>订单数</span><span>3/10</span></p>
+            <p><span>产品量</span><span>558/1860</span></p>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="8" style="height: 33%">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>本月异常类型分布</span>
+          </div>
+          <v-chart ref="pieRef" style="height: 100%" :option="pieOption" />
+        </el-card>
+      </el-col>
+      <el-col :span="8" style="height: 33%; margin-top: 5px">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>近7天良率趋势</span>
+          </div>
+          <v-chart ref="lineRef" style="height: 100%" :option="lineOption" />
+        </el-card>
+      </el-col>
+      <el-col :span="16" style="height: 33%; margin-top: 5px">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>准时交付率</span>
+          </div>
+          <v-chart ref="barRef3" style="height: 100%" :option="barOption1" />
+        </el-card>
+      </el-col>
+      <el-col :span="24" style="height: calc(34% - 15px); margin-top: 5px">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>计划进度看板</span>
+          </div>
+          <ele-pro-table
+            ref="table"
+            :columns="columns"
+            :datasource="datasource"
+            :needPage="false"
+            :toolbar="false"
+          >
+          </ele-pro-table>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script>
+// import {
+//   queryHomePage,
+//   queryFactory,
+//   queryTeam,
+//   queryProductionLine
+// } from '@/api/qms';
+import dictMixins from '@/mixins/dictMixins';
+import { pieOption, barOption, lineOption, columns } from './data';
+import { use } from 'echarts/core';
+import { CanvasRenderer } from 'echarts/renderers';
+import { BarChart, PieChart, LineChart } from 'echarts/charts';
+import {
+  GridComponent,
+  TooltipComponent,
+  LegendComponent
+} from 'echarts/components';
+import EleChart from 'ele-admin/packages/ele-chart';
+
+import VChart from 'vue-echarts';
+import { echartsMixin } from '@/utils/echarts-mixin';
+// 按需加载 echarts
+use([
+  CanvasRenderer,
+  BarChart,
+  PieChart,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  LineChart
+]);
+export default {
+  mixins: [
+    dictMixins,
+    echartsMixin(['pieRef', 'barRef1', 'lineRef', 'barRef3'])
+  ],
+  components: { VChart },
+  data() {
+    return {
+      columns,
+      arr: [
+        {
+          name: '在制工单数',
+          num: '188',
+          // imgUrl: require('../../assets/Group1.png'),
+          unit: '个'
+        },
+        {
+          name: '在制工单计划生产数',
+          num: '188',
+          // imgUrl: require('../../assets/Group2.png'),
+          unit: 'pcs'
+        },
+        {
+          name: '在制工单已入库数',
+          num: '188',
+          // imgUrl: require('../../assets/Group3.png'),
+          unit: 'pcs'
+        },
+        {
+          name: '在制工单延期生产数',
+          num: '188',
+          // imgUrl: require('../../assets/Group4.png'),
+          unit: 'pcs',
+          color: '#f97876'
+        }
+      ],
+
+      pieOption: {},
+      barOption: {},
+      barOption1: {},
+      lineOption: {},
+      form: {
+        finishTime: '',
+        timeType: '1'
+      }
+    };
+  },
+
+  created() {
+    this.pieOption = pieOption([
+      { value: 60, name: '人员异常' },
+      { value: 60, name: '物料异常' },
+      { value: 60, name: '设备异常' },
+      { value: 60, name: '工装异常' },
+      { value: 60, name: '工装异常' },
+      { value: 60, name: '设计异常' },
+      { value: 60, name: '交期异常' }
+    ]);
+    this.barOption = barOption(
+      ['一厂', '二厂', '三厂', '四厂', '五厂', '六厂'],
+      [
+        {
+          name: '任务量',
+          barWidth: '25%',
+          data: [50, 78, 88, 76, 75, 91],
+          type: 'bar',
+          yAxisIndex: 0 // 使用第一个Y轴
+        },
+        {
+          name: '完成量',
+          barWidth: '25%',
+          data: [50, 78, 88, 76, 75, 91],
+          type: 'bar',
+          yAxisIndex: 0 // 使用第一个Y轴
+        },
+        {
+          name: '达成率',
+          symbolSize: 10,
+          data: [50, 78, 88, 76, 75, 91],
+          type: 'line',
+          smooth: true,
+          yAxisIndex: 1, // 使用第一个Y轴
+          itemStyle: {
+            color: '#59b9fe'
+          }
+        }
+      ]
+    );
+    this.barOption1 = barOption(
+      [
+        '一月',
+        '二月',
+        '三月',
+        '四月',
+        '五月',
+        '六月',
+        '七月',
+        '八月',
+        '九月',
+        '十月',
+        '十一月',
+        '十二月'
+      ],
+      [
+        {
+          name: '应完成订单',
+          barWidth: '25%',
+          data: [50, 78, 88, 76, 75, 91, 78, 87, 81, 67, 95, 73],
+          type: 'bar',
+          yAxisIndex: 0 // 使用第一个Y轴
+        },
+        {
+          name: '实际完成订单',
+          barWidth: '25%',
+          data: [50, 78, 88, 76, 75, 91, 78, 87, 81, 67, 95, 73],
+          type: 'bar',
+          yAxisIndex: 0 // 使用第一个Y轴
+        },
+        {
+          name: '准时交付率',
+          symbolSize: 10,
+          data: [50, 78, 88, 76, 75, 91, 78, 87, 81, 67, 95, 73],
+          type: 'line',
+          smooth: true,
+          yAxisIndex: 1, // 使用第一个Y轴
+          itemStyle: {
+            color: '#ff8856'
+          }
+        }
+      ]
+    );
+    this.lineOption = lineOption([
+      [30, 58, 68, 36, 55, 41, 73],
+      [55, 81, 90, 80, 78, 95, 80]
+    ]);
+  },
+  methods: {
+    datasource({ page, where, limit }) {
+      return [];
+      return getList({
+        ...where,
+        pageNum: page,
+        size: limit
+      });
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.clearfix {
+  font-size: 0.7vw;
+
+  > span {
+    font-weight: bold;
+  }
+  :deep(.el-radio-button__inner) {
+    font-size: 0.7vw;
+  }
+}
+.ele-body {
+  height: calc(100vh - 136px);
+  > .el-row {
+    height: 100%;
+  }
+  .el-card {
+    height: 100%;
+    :deep(.el-card__body) {
+      padding: 0.3vw;
+    }
+    :deep(.el-card__header) {
+      padding: 0.6vw;
+    }
+    :deep(.el-card__body) {
+      height: calc(100% - 2.3vw);
+    }
+    :deep(.ele-pro-table) {
+      height: 99%;
+    }
+    :deep(.el-table) {
+      font-size: 0.65vw;
+    }
+  }
+}
+
+.item {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(to right, #3283ee, #81b3f5);
+  border-radius: 6px;
+  padding: 1vw;
+  color: #fff;
+  > .header {
+    font-size: 0.9vw;
+    font-weight: 600;
+    width: 100%;
+    padding-bottom: 0.7vw;
+    border-bottom: 1px solid #f3f3f3;
+    text-align: center;
+  }
+  > .content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    font-size: 0.9vw;
+    font-weight: 500;
+    height: calc(100% - 1.5vw);
+    p {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      height: 33%;
+    }
+  }
+}
+</style>
+
+