tft-fe/src/views/home/components/Product.vue

<template>
  <ul
    class="product_area"
    :style="{ padding: 12 * beilv + 'px 0 0 ' + 23 * beilv + 'px' }"
  >
    <li class="box_left">
      <div
        class="title"
        :style="{
          marginBottom: 14 * beilv + 'px',
          fontSize: 14 * beilv + 'px'
        }"
      >
        <span>生产信息</span>
        <span>工单号：{{ productMsg.code }}</span>
      </div>
      <el-row :gutter="16">
        <el-col :span="10">
          <div
            class="plan_num"
            :style="{
              padding:
                14 * beilv + 'px 0px ' + 12 * beilv + 'px ' + 16 * beilv + 'px',
              marginBottom: 10 * beilv + 'px'
            }"
          >
            <svg-icon
              icon-class="home_plan"
              :style="{
                fontSize: 30 * beilv + 'px',
                marginBottom: 6 * beilv + 'px'
              }"
            />
            <p
              class="num"
              :style="{
                fontSize: 24 * beilv + 'px',
                marginBottom: 5 * beilv + 'px'
              }"
            >
              {{ productMsg.planNum }}
            </p>
            <p class="words">计划数量</p>
          </div>
          <div
            class="product_num"
            :style="{
              padding:
                14 * beilv + 'px 0px ' + 12 * beilv + 'px ' + 16 * beilv + 'px',
              marginBottom: 10 * beilv + 'px'
            }"
          >
            <svg-icon
              icon-class="home_product"
              :style="{
                fontSize: 30 * beilv + 'px',
                marginBottom: 6 * beilv + 'px'
              }"
            />
            <p
              class="num"
              :style="{
                fontSize: 24 * beilv + 'px',
                marginBottom: 5 * beilv + 'px'
              }"
            >
              {{ productMsg.finishNum }}
            </p>
            <p class="words">生产数量</p>
          </div>
        </el-col>
        <el-col :span="14">
          <ring-chart :chartMsg="productMsg" :beilv="beilv" />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="progress_box" :style="{ fontSize: 14 * beilv + 'px' }">
            <span>工单进度</span>
            <span class="blue_color">{{ progressPercentage }}</span>
            <div class="home_progress">
              <el-progress
                :text-inside="true"
                :stroke-width="strokeWidth"
                :percentage="progressP"
                v-if="!isNaN(parseInt(progressP))"
              ></el-progress>
            </div>
          </div>
        </el-col>
      </el-row>
    </li>
    <li
      class="box_right"
      :style="{
        padding: '0 ' + 40 * beilv + 'px',
        fontSize: 14 * beilv + 'px'
      }"
    >
      <div class="title">
        <span>对比信息</span>
      </div>
      <div>
        <div
          class="progress_box"
          :style="{
            marginBottom: 16 * beilv + 'px',
            paddingTop: 18 * beilv + 'px'
          }"
        >
          <span>13时直通率</span>
          <span class="blue_color">63.45%</span>
          <div class="home_progress">
            <el-progress
              :text-inside="true"
              :stroke-width="strokeWidth"
              :percentage="70"
            ></el-progress>
          </div>
        </div>
        <div class="progress_box" :style="{ marginBottom: 92 * beilv + 'px' }">
          <span>14时直通率</span>
          <span class="blue_color">63.45%</span>
          <div class="home_progress">
            <el-progress
              :text-inside="true"
              :stroke-width="strokeWidth"
              :percentage="70"
            ></el-progress>
          </div>
        </div>
      </div>
      <div class="progress_box" :style="{ marginBottom: 16 * beilv + 'px' }">
        <span>昨日直通率</span>
        <span class="blue_color">63.45%</span>
        <div class="home_progress">
          <el-progress
            :text-inside="true"
            :stroke-width="strokeWidth"
            :percentage="70"
          ></el-progress>
        </div>
      </div>
      <div class="progress_box">
        <span>今日直通率</span>
        <span class="blue_color">63.45%</span>
        <div class="home_progress">
          <el-progress
            :text-inside="true"
            :stroke-width="strokeWidth"
            :percentage="70"
          ></el-progress>
        </div>
      </div>
    </li>
  </ul>
</template>
<script>
import RingChart from './RingChart.vue'
export default {
  name: 'ProductArea',
  components: { RingChart },
  data() {
    return {}
  },
  props: {
    productMsg: {
      type: Object,
      default: () => {
        return {}
      }
    },
    beilv: {
      type: Number,
      default: 1
    }
  },
  computed: {
    strokeWidth: function () {
      return 16 * this.beilv
    },
    progressP: function () {
      return this.productMsg.process * 100
    },
    progressPercentage: function () {
      return this.productMsg.process * 100 + '%'
    }
  }
}
</script>
<style>
.home_progress .el-progress-bar__inner {
  background: linear-gradient(270deg, #4bc4ff 0%, #0b58ff 100%);
}
</style>
<style lang="scss" scoped>
.product_area {
  display: flex;
  .box_left,
  .box_right {
    width: 50%;
    height: calc((100vh - 168px) / 2 - 70px);
    .title {
      color: #000000;
      :first-child {
        margin-right: 24px;
      }
    }
    .title::before {
      content: '';
      display: inline-block;
      width: 4px;
      height: 16px;
      background: #0b58ff;
      border-radius: 1px;
      margin-right: 8px;
      vertical-align: middle;
    }
  }
  .box_left {
    border-right: 1px solid #dcdfe6;
    padding-right: 18px;
    .plan_num,
    .product_num {
      width: 100%;
      border-radius: 8px;
      // padding: 14px 0 12px 16px;
      // margin-bottom: 12px;
      .num {
        color: rgba(0, 0, 0, 0.85);
      }
      .words {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.45);
      }
    }
    .plan_num {
      background: #fff8e8;
    }
    .product_num {
      background: #e3ffeb;
    }
  }
  .progress_box {
    color: #000000;
    .blue_color {
      color: #0d5bff;
      float: right;
      margin-bottom: 8px;
    }
  }
}
</style>