vis389/src/views/bigScreen/drivingCabin/center.vue

<template>
  <div>
    <container3>
      <img class="img" :src="val.bigPic" style="width: 100%; height: 100%" />
      <rocketTit class="tit">全年目标</rocketTit>
      <div class="data">
        <div class="data-item">
          <div>
            <img src="./icon1.png" alt="" /><span style="font-weight: bold"
              >收入</span
            >
          </div>
          <div class="box">
            <i>{{ val.completedIncome }}/</i
            ><i class="num">{{ val.targetIncome }}</i
            ><span class="num2">万</span>
          </div>
          <div style="width: 100%">
            <progressBar
              :percentage="(val.completedIncome / val.targetIncome) * 100"
            />
          </div>
        </div>
        <div class="data-item">
          <div>
            <img src="./icon2.png" alt="" /><span style="font-weight: bold"
              >利润</span
            >
          </div>
          <div class="box">
            <i>{{ val.completedProfit }}/</i
            ><i class="num">{{ val.targetProfit }}</i
            ><span class="num2">万</span>
          </div>
          <div style="width: 100%">
            <progressBar
              :percentage="(val.completedProfit / val.targetProfit) * 100"
            />
          </div>
        </div>
        <div class="data-item">
          <div>
            <img src="./icon3.png" alt="" /><span style="font-weight: bold"
              >装药量</span
            >
          </div>
          <div class="box">
            <i>{{ val.completedChargeQuantity }}/</i
            ><i class="num">{{ val.targetChargeQuantity }}</i
            ><span class="num2">万件</span>
          </div>
          <div style="width: 100%">
            <progressBar
              :percentage="
                (val.completedChargeQuantity / val.targetChargeQuantity) * 100
              "
            />
          </div>
        </div>
        <div class="data-item">
          <div>
            <img src="./icon4.png" alt="" /><span style="font-weight: bold"
              >交付数量</span
            >
          </div>
          <div class="box">
            <i>{{ val.completedDeliveryQuantity }}/</i
            ><i class="num">{{ val.targetDeliveryQuantity }}</i
            ><span class="num2">万件</span>
          </div>
          <div style="width: 100%">
            <progressBar
              :percentage="
                (val.completedDeliveryQuantity / val.targetDeliveryQuantity) *
                100
              "
            />
          </div>
        </div>
      </div>
    </container3>
  </div>
</template>

<script>
import container3 from "../components/container3/index.vue";
import rocketTit from "../components/rocketTit/index.vue";
import progressBar from "./../components/progress/index.vue";

import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../dashboard/mixins/resize";

export default {
  mixins: [resize],
  name: "left1",
  components: {
    container3,
    rocketTit,
    progressBar,
  },
  data() {
    return {
      val: {
        bigPic: "",
        completedChargeQuantity: "0",
        completedDeliveryQuantity: "0",
        completedIncome: "0",
        completedProfit: "0",
        id: 1,
        targetChargeQuantity: "0",
        targetDeliveryQuantity: "0",
        targetIncome: "0",
        targetProfit: "0",
        year: "0",
      },
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.getData();
    });
  },
  beforeDestroy() {},
  methods: {
    getData() {
      this.request({
        url: "/hx/cockpitOverview/annualTargetAndPic",
        method: "get",
      }).then((res) => {
        if (200 == res.code) {
          this.val = res.data[0];
        } else {
          this.$message.error(res.msg);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.tit {
  padding: 16px 24px;
}
.img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.data {
  display: flex;
  justify-content: space-evenly;
  margin: 0 30px;
  background: rgba(2, 18, 63, 0.33);
  color: #ffffff;
  font-size: 18px;
  .data-item {
    // flex: 1;
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    > div {
      margin: 5px 0;
      text-align: center;
      img {
        // width: 10px;
        // height: 10px;
        vertical-align: middle;
        margin-right: 5px;
      }
    }
    .box {
      font-size: 26px;
      font-family: Roboto-BlackItalic, Roboto;
      font-weight: 600;
      color: #55c5a2;
    }
    .num {
      font-size: 14px;
    }
    .num2 {
      font-size: 16px;
      margin-left: 5px;
      color: #fff;
    }
  }
}

.container3 {
  position: relative;
  .con_right {
    width: 88px;
    position: absolute;
    top: 20%;
    right: 20%;
    color: #00ffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img {
      width: 100%;
    }
    .con_title {
      width: 100%;
      display: flex;
      align-items: center;
      img {
        width: 25%;
      }
    }
    .con_height {
      width: 2px;
      height: 20px;
      background-color: #00ffff;
    }
  }
  .con_two {
    top: 43%;
    right: 12%;
  }
  .con_left {
    width: 186px;
    position: absolute;
    top: 60%;
    left: 24%;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    img {
      width: 100%;
      display: block;
      margin: 0 auto;
    }
    .con_left_title {
      position: relative;
      .con_card {
        width: 100%;
        padding: 0 10px;
        position: absolute;
        top: 22%;
        div {
          width: 100%;
          display: flex;
          justify-content: space-between;
          span:nth-child(1) {
            opacity: 0.9;
          }
          span:nth-child(2) {
            font-weight: bold;
          }
        }
      }
    }
    .con_h_two {
      position: relative;
      width: 50%;
      height: 47px;
      border: 1px solid #fa8c16;
      border-top-width: 0;
      border-right-width: 0;
      .con_bottom {
        height: 24px;
        line-height: 26px;
        position: absolute;
        right: -50%;
        bottom: -50%;
        text-align: right;
        transform: translate(-50%, -50%);
        img {
          width: 38%;
          margin: 0;
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
  }
}
</style>