左上统计组件

yangfeng

2023-12-01 3bbf405ec1083b792d817bbd4c755bc3aa3abf14

左上统计组件

 src/components/cockpitPage/BackgroundBoardLayout.vue

@@ -55,19 +55,23 @@
// 上边固定高
$topBlockHeight: 100px;
// 左侧头部数据高度
$leftHeaderHeight: 85px;
$leftHeaderHeight: 8%;
// 左侧公共右边距
$leftMarginRight: 25px;
// 整体内容左边距
$leftMargin: 80px;
// 整体内容右边距
$rightMargin: 65px;
// 左侧布局块高度
$leftBlockHeight: calc(100vh - 225px);
$leftBlockHeight: calc(100vh - 245px);
// 右侧布局块高度
$rightBlockHeight: calc(100vh - 120px);
// 左下上边距
$leftBottomMarginTop: 40px;
// 左下左侧区域宽
$leftBottomLeftWidth: 35%;
$leftBottomLeftWidth: 39%;
// 左下右侧区域宽
$leftBottomRightWidth: 65%;
$leftBottomRightWidth: 61%;

.dashboard-layout {
  background-image: url("/cockpit-bg.jpg");
@@ -116,17 +120,17 @@
.left-header-block {
  height: $leftHeaderHeight;
  margin-top: $topBlockHeight;
  background: #dd3535;
  padding-right: $leftMarginRight;
}
.left-bottom-block {
  margin-top: 20px;
  margin-top: $leftBottomMarginTop;
  height: $leftBlockHeight;
  display: flex;
  .left-bottom-left-block {
    width: $leftBottomLeftWidth;
    height: 100%;
    .left-bottom-top-block {
      height: 40%;
      height: 41%;
      background: #9135dd;
    }
    .left-bottom-middle-block {
@@ -134,7 +138,7 @@
      background: #dd35a5;
    }
    .left-bottom-bottom-block {
      height: 35%;
      height: 34%;
      background: #dd355f;
    }
  }

 src/views/cockpitPage/components/StatisticalBox.vue

New file
@@ -0,0 +1,65 @@
<template>
  <div class="statistical-box">
    <div v-for="item in allList" class="all-bg">
      <div class="box">
        <div class="commom-title">{{ item.title }}</div>
        <div class="commom-value">{{ item.value }}</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">
.statistical-box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .all-bg {
    width: 15%;
    height: 100%;
    text-align: center;
    border: 1px solid #00ffff;
    background: linear-gradient(90deg, #09132c, #09374f);
    color: #dcb018;
    display: flex;
    align-items: center;
    justify-content: center;
    .box {
      .commom-title {
        font-size: 18px;
        font-family: "Arial Normal", "Arial";
        font-weight: 400;
      }
      .commom-value {
        font-size: 28px;
        font-family: "Arial Negreta", "Arial Normal", "Arial";
        font-weight: 700;
      }
    }
  }
}
</style>

 src/views/cockpitPage/index.vue

@@ -1,5 +1,8 @@
<template>
  <BackgroundBoardLayout>
    <template #leftBlock1>
      <StatisticalBox></StatisticalBox>
    </template>
    <template #rightBlock3>
      <BarChart @should-reload="reloadAllData"></BarChart>
    </template>
@@ -7,10 +10,12 @@
</template>

<script>
import StatisticalBox from "@/views/cockpitPage/components/StatisticalBox";
import BackgroundBoardLayout from "@/components/cockpitPage/BackgroundBoardLayout.vue";
import BarChart from "@/components/cockpitPage/BarChart.vue";
export default {
  components: {
    StatisticalBox,
    BackgroundBoardLayout,
    BarChart,
  },