机器开机率和数量统计

yangfeng

2023-12-01 301a55f959a7376c15a87a70338334b7224223e4

机器开机率和数量统计

 public/cockpitPage/machine-chart-bg.png

 public/cockpitPage/machine-top.png

 src/components/cockpitPage/BackgroundBoardLayout.vue

@@ -69,9 +69,9 @@
// 左下上边距
$leftBottomMarginTop: 40px;
// 左下左侧区域宽
$leftBottomLeftWidth: 39%;
$leftBottomLeftWidth: 37%;
// 左下右侧区域宽
$leftBottomRightWidth: 61%;
$leftBottomRightWidth: 63%;

.dashboard-layout {
  background-image: url("/cockpit-bg.jpg");
@@ -131,15 +131,12 @@
    height: 100%;
    .left-bottom-top-block {
      height: 41%;
      background: #9135dd;
    }
    .left-bottom-middle-block {
      height: 25%;
      background: #dd35a5;
    }
    .left-bottom-bottom-block {
      height: 34%;
      background: #dd355f;
    }
  }
  .left-bottom-right-block {
@@ -147,11 +144,9 @@
    height: 100%;
    .right-bottom-top-block {
      height: 60%;
      background: #35ddc7;
    }
    .right-bottom-bottom-block {
      height: 40%;
      background: #35dd8f;
    }
  }
}
@@ -162,7 +157,6 @@
}
.right-top-block {
  height: 30%;
  background: #9135dd;
}
.right-middle-block {
  height: 35%;

 src/views/cockpitPage/components/CountView.vue

New file
@@ -0,0 +1,138 @@
<template>
  <div class="count-view">
    <div class="box">
      <div class="left">
        <div class="title-view">
          <div>开机台数</div>
        </div>
        <div class="value-view">
          <div class="title-margin-left">200台</div>
        </div>
      </div>
      <div class="right">
        <div class="title-view">
          <div>外加工台数</div>
        </div>
        <div class="value-view">
          <div class="title-margin-left">500台</div>
        </div>
      </div>
    </div>
    <div class="box">
      <div class="left">
        <div class="title-view">
          <div>计划外加工数</div>
        </div>
        <div class="value-view">
          <div class="title-margin-left">4000件</div>
        </div>
      </div>
      <div class="right">
        <div class="title-view">
          <div>计划生产数</div>
        </div>
        <div class="value-view">
          <div class="title-margin-left">2000件</div>
        </div>
      </div>
    </div>
    <div class="box">
      <div class="left">
        <div class="title-view">
          <div>实际外加工数</div>
        </div>
        <div class="value-view">
          <div class="title-margin-left">4000件</div>
        </div>
      </div>
      <div class="right">
        <div class="title-view">
          <div>实际生产数</div>
        </div>
        <div class="value-view">
          <div class="title-margin-left">2000件</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      allList: [
        { title: "开机台数", value: 200 },
        { title: "总产量", value: 1200 },
        { title: "生产工单数", value: 200 },
        { title: "延期交付", value: 20 },
        { title: "物料不足", value: 10 },
        { title: "计划达成率", value: 2 },
      ],
    };
  },
  mounted() {},
  watch: {},
  methods: {},
};
</script>

<style scoped lang="scss">
.count-view {
  margin-top: 20px;
  width: calc(100% - 20px);
  height: 100%;
  .box {
    height: 33%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left,
    .right {
      width: 50%;
      height: 100%;
      display: flex;
      align-items: center;
      .title-view {
        width: 70%;
        height: calc(100% - 10px);
        background: linear-gradient(290deg, transparent 42px, #3a3728 0) bottom
          left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        color: #3a3728;
        font-family: "Arial Negreta", "Arial Normal", "Arial";
        font-weight: 700;
        font-size: 20px;
        color: #fccd1d;
        display: flex;
        align-items: center;
        padding-left: 8px;
        border-radius: 5px;
      }
      .value-view {
        margin-left: -70px;
        width: 50%;
        // text-align: right;
        height: calc(100% - 25px);
        background: linear-gradient(110deg, transparent 42px, #083f55 0) bottom
          left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        font-size: 20px;
        color: #01f7fd;
        font-family: "Arial Normal", "Arial";
        font-weight: 400;
        display: flex;
        align-items: center;
        border-radius: 5px;
        .title-margin-left {
          margin-left: 45px;
        }
      }
    }
  }
}
</style>

 src/views/cockpitPage/components/MachineStartupRate.vue

New file
@@ -0,0 +1,143 @@
<template>
  <div class="machine-startup-rate">
    <div class="bar-contents">
      <div class="top-view">
        <img src="/cockpitPage/machine-top.png" alt="" />
        <div class="top-title">
          <span>机器开机率</span>
          <span class="top-rate">{{ "60%" }}</span>
        </div>
      </div>
      <div class="machine-chart-bg">
        <img
          src="/cockpitPage/machine-chart-bg.png"
          alt=""
          style="width: 250px; height: 260px"
        />
      </div>
      <div class="chart" ref="chart"></div>
    </div>
  </div>
</template>

<script>
//引入echart
import * as echarts from "echarts";
export default {
  components: {},
  props: {},
  data() {
    return {};
  },
  mounted() {
    let chartData = [
      { value: 20, name: "闲置" },
      { value: 20, name: "维修" },
      { value: 60, name: "工作" },
    ];
    this.pieChart("chart", chartData);
  },
  watch: {},
  methods: {
    //在职
    pieChart(chartName, data) {
      let chartDom = this.$refs[chartName];
      let myChart = echarts.init(chartDom);
      let option;
      if (data) {
        option = {
          color: ["#065a6f", "#067687", "#00ffff"],
          tooltip: {
            trigger: "item",
          },
          series: [
            {
              name: "Access From",
              type: "pie",
              radius: ["58%", "70%"],
              avoidLabelOverlap: false,
              label: {
                color: "#01f7fd",
                fontSize: 14,
                formatter: function (params) {
                  return params.name + params.value + "%";
                },
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 16,
                  fontWeight: "bold",
                },
              },
              labelLine: {
                show: true,
                length: 50,
                color: "blue",
              },
              data: data,
            },
          ],
        };

        option && myChart.setOption(option);
      } else {
        option = {};
        myChart.setOption(option, true);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.machine-startup-rate {
  width: 100%;
  height: 100%;
  .bar-contents {
    width: calc(100% - 20px);
    height: 100%;
    border: 1px solid #00ffff;
    box-sizing: border-box;
    position: relative;
    .top-view {
      width: 33%;
      margin-top: -1px;
      margin-left: -1px;
      position: relative;
      text-align: center;
      .top-title {
        width: 100%;
        position: absolute;
        top: 20%;
        left: 0;
        margin: auto;
        color: #01f7fd;
        font-size: 14px;
        font-family: "Arial Negreta", "Arial Normal", "Arial";
        font-weight: 700;
        .top-rate {
          margin-left: 5px;
          color: #fec718;
        }
      }
    }
    .machine-chart-bg {
      width: 100%;
      height: 100%;
      text-align: center;
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      opacity: 0.55;
    }
    .chart {
      margin-top: 8px;
      margin-left: 5px;
      width: 100%;
      height: calc(80% - 20px);
    }
  }
}
</style>

 src/views/cockpitPage/index.vue

@@ -3,6 +3,12 @@
    <template #leftBlock1>
      <StatisticalBox></StatisticalBox>
    </template>
    <template #leftBlock2>
      <MachineStartupRate></MachineStartupRate>
    </template>
    <template #leftBlock3>
      <CountView></CountView>
    </template>
    <template #rightBlock2>
      <MaterialChart @should-reload="reloadAllData"></MaterialChart>
    </template>
@@ -14,6 +20,8 @@

<script>
import StatisticalBox from "@/views/cockpitPage/components/StatisticalBox";
import MachineStartupRate from "@/views/cockpitPage/components/MachineStartupRate";
import CountView from "@/views/cockpitPage/components/CountView";
import BackgroundBoardLayout from "@/components/cockpitPage/BackgroundBoardLayout.vue";
import MaterialChart from "@/views/cockpitPage/components/MaterialChart.vue";
import BarChart from "@/views/cockpitPage/components/BarChart.vue";
@@ -23,6 +31,8 @@
    BackgroundBoardLayout,
    MaterialChart,
    BarChart,
    MachineStartupRate,
    CountView,
  },
  props: {},
  data() {