hyyfScreen/src/views/Production/board/IndicatorItem.vue

<!--
 * @Author: your name
 * @Date: 2021-11-22 14:25:49
 * @LastEditTime: 2022-01-06 10:07:24
 * @LastEditors: Please set LastEditors
 * @Description: 重点指标的 item
 * @FilePath: \hyyfScreen\src\views\Production\board\IndicatorItem.vue
-->
<template>
  <div class="indicator-item" @click="clickItem">
    <div class="left">
      <h2>{{ title }}</h2>
      <span>{{ subtitle }}</span>
    </div>
    <div class="center">
      <indicator-chart
        :id="id"
        :ifPositive="ifPositive"
        :data="data"
      ></indicator-chart>
    </div>
    <div class="right">
      <h3>{{ titleNum + (percent ? "%" : "") }}</h3>
      <span class="num-common" :class="ifPositive ? 'positive' : 'negative'">
        {{ subtitleNum }}
      </span>
    </div>
  </div>
</template>
<script>
import IndicatorChart from "./IndicatorChart.vue";
export default {
  props: {
    title: {
      type: String,
      required: true,
    },
    subtitle: {
      type: String,
      required: true,
    },
    titleNum: {
      type: String,
      required: true,
    },
    subtitleNum: {
      type: String,
      required: true,
    },
    ifPositive: {
      type: Boolean,
      required: true,
    },
    id: {
      type: Number,
      required: true,
    },
    data: {
      type: Object,
      required: true,
    },
    percent: {
      type: Boolean,
      required: true,
    },
  },
  components: {
    IndicatorChart,
  },
  methods: {
    clickItem() {
      this.$emit("clickItem");
    },
  },
};
</script>
<style scoped>
.indicator-item {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  border-bottom: 2px solid rgb(56, 55, 55);
  padding: 20px 0;
}
.left {
  width: 27%;
}
.left > h2 {
  font-size: 23px;
}
.left > span {
  font-size: 15px;
  color: #ccc;
}
.center {
  width: 50%;
}
.right {
  width: 20%;
}
.right > h3 {
  font-size: 20px;
}
.num-common {
  display: inline-block;
  font-size: 20px;
  width: 100px;
  height: 28px;
  line-height: 28px;
  border-radius: 8px;
}
.positive {
  background-color: red;
}
.negative {
  background-color: green;
}
</style>