ads_web/src/components/MetricsCards/mCard.vue

<template>
  <el-card class="metric-card">
    <div class="metric-card__color" :style="boardTopStyle"></div>
    <TextSelector v-model="metric" :options="props.metricItems" @change="changeMetric"></TextSelector>
    <div class="metric-value">{{ selectedData?.metricVal }}</div>
    <div class="metric-pre">
      <span>{{ selectedData?.preVal }}&nbsp;&nbsp;</span>
      <el-icon v-show="selectedData?.gapVal" style="display: inline-block; padding-top: 2px">
        <Top :class="colorClass" v-if="isBoost"/>
        <Bottom :class="colorClass" v-else/>
      </el-icon>
      <span :class="colorClass">{{ selectedData?.gapVal ? selectedData?.gapVal + '%' : '' }}</span>
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import TextSelector from '/@/components/TextSelector/index.vue'

defineOptions({
  name: 'MCard'
})

interface Props {
  modelValue: string,
  metricItems: MetricData[],
  color?: string,
}
const props = defineProps<Props>()
const emits = defineEmits(["update:modelValue", "change-metric"])
const metric = ref(props.modelValue)
const changeMetric = ( newVal: string, oldVal: string) => {
  emits('update:modelValue', newVal)
  emits('change-metric', newVal, oldVal)
}
const selectedData = computed(():MetricData|null => {
  const info = props.metricItems.find(item => item.value === metric.value)
  if(!info) return null
  return info
})
const boardTopStyle = computed(() => {
  const style_ = { "border-top-color": "rgb(232, 244, 255)" }
  if (props.color) { style_["border-top-color"] = props.color }
  return style_
})
const isBoost = computed(():boolean => {
  return (selectedData.value?.gapVal ?? -1) > 0
})
const colorClass = computed((): "green"|"red" => isBoost.value ? "green": "red")

</script>

<style scoped>
:deep(.el-card__body) {
  padding: 0;
}
.metric-card {
  padding: 12px 8px;
  height: 100px;

  position: relative;
  min-width: 150px;
  overflow-y: hidden;
  line-height: 1.4;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 12px rgba(51,89,181,.1607843137254902);
  cursor: pointer;
  flex-grow: 1;
}
.metric-card__color {
  position: absolute;
  top: 0;
  left: 8px;
  width: calc(100% - 16px);
  height: 0;
  border-top: 4px solid #86909c;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
}
.metric-value {
  padding: 8px 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 25px;
}

.metric-pre {
  color: #6b7785;
  font-size: 12px;
  white-space: nowrap;
}
.red {
  color: red;
}
.green {
  color: #1cbc0e;
}
</style>