首页

src/api/main/index.js

@@ -0,0 +1,42 @@
+import request from '@/utils/request';
+
+
+// 产品合格率
+
+export async function queryHomePage (data) {
+    const res = await request.post(`/qms/quality_work_order/queryHomePage` , data);
+    if (res.data.code == 0) {
+      return res.data.data;
+    }
+    return Promise.reject(new Error(res.data.message));
+  }
+
+// 工厂查询
+
+export async function queryFactory () {
+  const res = await request.get(`/qms/quality_work_order/queryFactory`);
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+
+// 班组查询
+
+export async function queryTeam () {
+  const res = await request.get(`/qms/quality_work_order/queryTeam`);
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+// 产线查询
+
+export async function queryProductionLine () {
+  const res = await request.get(`/qms/quality_work_order/queryProductionLine`);
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}

src/api/qms/index.js

@@ -0,0 +1,14 @@
+import request from '@/utils/request';
+
+
+
+export async function queryFactory () {
+  const res = await request.get(`/qms/quality_work_order/queryFactory`);
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+
+

src/views/home/data.js

@@ -0,0 +1,199 @@
+// 引入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 barOption = (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,
+            }
+        },
+        color: ['#1890ff'],
+        xAxis: {
+            type: 'category',
+            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月',],
+            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]
+                },
+            }
+        ],
+        series: [
+            {
+                name: '工单入库数量',
+                barWidth: '25%',
+                data: data,
+                type: 'bar',
+                yAxisIndex: 0 // 使用第一个Y轴
+            }, {
+                name: '工单数',
+                symbolSize: 10,
+                data: [2, 1, 4, 5, 1, 2, 3, 4, 5, 1, 2, 1],
+                type: 'line', smooth: true,
+
+                itemStyle: {
+                    color: '#ffab08'
+                },
+              
+            }
+        ]
+    }
+}
+
+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%', '40%'],
+                label: {
+                    position: 'outside',
+                    show: true,
+                    formatter: (item) => {
+                        return item.name + "：" + item.value + '%'
+                    },
+                    fontSize: window.innerHeight * 0.014,
+                    // color:"#fff"
+                },
+                labelLine: {
+                    show: true,
+
+                },
+                type: 'pie',
+                radius: '60%',
+                itemStyle: {
+                    borderWidth: 0,
+                    shadowBlur: 10,
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                },
+                data
+            }
+        ]
+    }
+}
+

src/views/home/index.vue

@@ -0,0 +1,234 @@
+<template>
+  <div class="ele-body">
+    <el-row :gutter="15">
+      <el-col :span="16" style="height: 57%">
+        <div style="height: 20%" class="item">
+          <div v-for="item in arr" :key="item" :style="{ color: item.color }">
+            <img :src="item.imgUrl" />
+            <div>
+              <span>
+                {{ item.name }}
+              </span>
+              <span>
+                {{ item.num }}
+                <span>{{ item.unit }}</span>
+              </span>
+            </div>
+          </div>
+        </div>
+        <el-card class="box-card" style="height: calc(80% - 15px)">
+          <div slot="header" class="clearfix">
+            <span>工单完成统计</span>
+            <el-radio-group
+              style="margin-left: 0.7vw"
+              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-group>
+          </div>
+          <v-chart ref="barRef" style="height: 100%" :option="barOption" />
+        </el-card>
+      </el-col>
+      <el-col :span="8" style="height: 57%">
+        <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="24" style="height: 43%; margin-top: 15px">
+        <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, 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', 'barRef'])],
+  components: { VChart },
+  data() {
+    return {
+      columns,
+      arr: [
+        {
+          name: '在制工单数',
+          num: '188',
+          imgUrl: require('../../assets/Group1.png'),
+          unit: '个'
+        },
+        {
+          name: '在制工单计划生产数',
+          num: '188',
+          imgUrl: require('../../assets/Group2.png'),
+          unit: '件'
+        },
+        {
+          name: '在制工单已入库数',
+          num: '188',
+          imgUrl: require('../../assets/Group3.png'),
+          unit: '件'
+        },
+        {
+          name: '在制工单延期生产数',
+          num: '188',
+          imgUrl: require('../../assets/Group4.png'),
+          unit: '件',
+          color: '#f97876'
+        }
+      ],
+
+      pieOption: {},
+      barOption: {},
+      form: {
+        finishTime: '',
+        timeType: '1'
+      }
+    };
+  },
+
+  created() {
+    this.pieOption = pieOption([
+      { value: 40, name: '  外观检测' },
+      { value: 30, name: '  尺寸检测' },
+      { value: 15, name: '  性能检测' },
+      { value: 10, name: '  密度检测' },
+      { value: 5, name: '  重量检测' }
+    ]);
+    this.barOption = barOption([
+      50, 78, 88, 76, 75, 91, 78, 87, 81, 67, 95, 73
+    ]);
+  },
+  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 - 111px);
+  > .el-row {
+    height: 100%;
+  }
+  .el-card {
+    height: 100%;
+    :deep(.el-card__body) {
+      padding: 0.3vw;
+    }
+    :deep(.el-card__header) {
+      padding: 0.8vw;
+    }
+    :deep(.el-card__body) {
+      height: calc(100% - 1.6vw - 39px);
+    }
+    :deep(.ele-pro-table) {
+      height: 99%;
+    }
+    :deep(.el-table) {
+      font-size: 0.65vw;
+    }
+  }
+}
+.item {
+  width: 100%;
+  display: flex;
+  margin-bottom: 15px;
+  > div {
+    border-radius: 4px;
+    flex: 1;
+    margin-left: 15px;
+    background: url(../../assets/item_frame.png) no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    align-items: center;
+    padding: 12px;
+    img {
+      width: 2.3vw;
+      // height:1.7vw;
+    }
+    > div {
+      display: flex;
+      flex-direction: column;
+      // margin-left: 0.8vw;
+      justify-content: center;
+      align-items: center;
+      width: 80%;
+      span:nth-of-type(1) {
+        font-size: 0.75vw;
+      }
+      span:nth-of-type(2) {
+        font-weight: bold;
+        font-size: 1.2vw;
+        margin-top: 0.8vw;
+        span {
+          font-size: 0.7vw;
+        }
+      }
+    }
+  }
+}
+</style>
+
+