<template>
  <div class="ruoyiUiExecutable">
    <dv-decoration-11 class="dv11">应急演习统计</dv-decoration-11>
    <div class="chartBox">
      <div @click="seeContingency(10)">
        <dv-decoration-9 class="dv9" :color="['#31cdba', '#31cdba']">{{
          trainObj.total
        }}</dv-decoration-9>
      </div>

      <div @click="seeContingency(20)">
        <dv-decoration-9 class="dv9" :color="['#e7ab12', '#e7ab12']">{{
          trainObj.finished
        }}</dv-decoration-9>
      </div>
      <div @click="seeContingency(30)">
        <dv-decoration-9 class="dv9" :color="['#dd5809', '#dd5809']">{{
          trainObj.enter
        }}</dv-decoration-9>
      </div>
      <div @click="seeContingency(40)">
        <dv-decoration-9 class="dv9" :color="['#1989fa', '#1989fa']">{{
          trainObj.team
        }}</dv-decoration-9>
      </div>
    </div>
    <div class="chartBox2">
      <p>总数</p>
      <p>已完成</p>
      <p>完成记录</p>
      <p>应急队伍</p>
    </div>
  </div>
</template>

<script>
import { trainStatistics } from "@/api/home";
export default {
  name: "RuoyiUiExecutable",

  data() {
    return {
      colors: [
        ["#31cdba", "#31cdba"],
        ["#e7ab12", "#e7ab12"],
        ["#dd5809", "#dd5809"],
        ["#1989fa", "#1989fa"],
      ],
      trainObj: {},
      trainList: [],
    };
  },

  mounted() {
    trainStatistics().then((res) => {
      console.log(res);
      if (res.code === 200) {
        this.trainObj = res.data;
      }
    });
  },

  methods: {
    seeContingency(val) {
      this.$emit("seeContingency", val);
    },
  },
};
</script>

<style lang="scss" scoped>
.dv11 {
  width: 200px;
  height: 50px;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  margin: 10px 0 0 10px;
}
.chartBox {
  /* margin-top: -30px; */
  display: flex;
  justify-content: space-around;
}
.chartBox2 {
  /* margin-top: -30px; */
  display: flex;
  justify-content: space-around;
  color: #fff;
  p {
    width: 75px;
    text-align: center;
    background: #1e4048;
  }
}
.dvChart {
  width: 270px;
  height: 270px;
}
.dv9 {
  width: 80px;
  height: 80px;
  color: #fff;
  font-weight: 900;
  font-size: 20px;
  cursor: pointer;
}
.ruoyiUiExecutable {
  padding-top: 5px;
}
</style>
