kd-aiot-frontend-aps/src/views/home/index.vue

<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">
            <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="10" 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="3" 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="3" 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" style="height: 100%">
          <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 { 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 VChart from 'vue-echarts';
import { echartsMixin } from '@/utils/echarts-mixin';
// 按需加载 echarts
use([
  CanvasRenderer,
  BarChart,
  PieChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  LineChart
]);
export default {
  mixins: [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() {},
  mounted() {
    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, 50, 78, 88, 76, 75, 91],
          type: 'bar',
          yAxisIndex: 0, // 使用第一个Y轴
          itemStyle: {
            color: '#f9cd5d'
          }
        },
        {
          name: '完成量',
          barWidth: '25%',
          data: [50, 78, 88, 76, 75, 91, 50, 78, 88, 76, 75, 91],
          type: 'bar',
          yAxisIndex: 0, // 使用第一个Y轴
          itemStyle: {
            color: '#5893eb'
          }
        },
        {
          name: '达成率',
          symbolSize: 10,
          data: [50, 78, 88, 76, 75, 91, 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]
    ]);
    setTimeout(() => {
      
      this.$refs.pieRef.resize();
      this.$refs.barRef1.resize();
      this.$refs.lineRef.resize();
      this.$refs.barRef3.resize();
    }, 300);
  },
  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: url(../../assets/main_item.png);
  background-size: cover;
  border-radius: 6px;
  padding: 1vw;
  color: #333;
  > .header {
    font-size: 0.9vw;
    font-weight: 600;
    width: 100%;
    padding-bottom: 0.7vw;
    border-bottom: 1px solid #f3f3f3;
    text-align: center;
    color: #3a92edd1;
  }
  > .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>