yudao-init/src/views/copilot/efficiency/components/StdRate.vue

<!--
 * @Author: zhp
 * @Date: 2024-05-07 10:25:10
 * @LastEditTime: 2024-05-09 08:44:21
 * @LastEditors: zhp
 * @Description:
-->

<template>
  <div class="std-rate">
    <div class="span-2">
      <StdRateItem :period="period" :city="cities[5]" />
    </div>
    <div v-for="item in cities.filter((val, index) => index != 5)" :key="item.name">
      <StdRateItem :period="period" :city="item" />
    </div>
  </div>
</template>

<script>
import StdRateItem from "./sub/std/StdRateItem.vue";
export default {
  name: "StdRate",
  components: { StdRateItem },
  props: {
    period: {
      type: String,
      default: "日",
    },
  },
  data() {
    return {
      cities: [
        { name: "瑞昌", target: 100, total: 200, thisYear: 20 },
        { name: "邯郸", target: 200, total: 300, thisYear: 20 },
        { name: "株洲", target: 300, total: 400, thisYear: 20 },
        { name: "佳木斯", target: 400, total: 500, thisYear: 20 },
        { name: "成都", target: 500, total: 600, thisYear: 20 },
        { name: "凯盛光伏", target: 400, total: 500, thisYear: 20 },
        { name: "蚌埠", target: 500, total: 600, thisYear: 20 },
      ],
    };
  },
  computed: {

  },
  methods: {},
};
</script>

<style scoped lang="scss">
.std-rate {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

.span-2 {
  grid-column: span 2;
}
</style>