zhgkpt-datav/app/src/views/Home/components/FireIndex/index.vue

<template>
  <div>
    <div class="fire-list">
    <!-- 火灾总数 -->
    <div class="fire">
      <div>
        <div>
          <span class="fire-num">456</span>
          <span>起</span>
        </div>
        <div>火灾总数</div>
      </div>
      <div>
        <img src="../../../../assets/images/Vector (1).png" alt="" />
        <span class="num up">15%</span>
      </div>
    </div>
    <!--亡人  -->
    <div class="fire">
      <div>
        <div>
          <span class="fire-num">8</span>
          <span>人</span>
        </div>
        <div>亡人</div>
      </div>
      <div>
        <img src="../../../../assets/images/Vector (2).png" alt="" />
        <span class="num down">15%</span>
      </div>
    </div>
    <!-- 伤人 -->
    <div class="fire">
      <div>
        <div>
          <span class="fire-num">46</span>
          <span>人</span>
        </div>
        <div>伤人</div>
      </div>
      <div>
        <img src="../../../../assets/images/Vector (1).png" alt="" />
        <span class="num up">10%</span>
      </div>
    </div>
    <!-- 直接经济损失 -->
    <div class="fire">
      <div>
        <div>
          <span class="fire-num">6</span>
          <span class="money">万元</span>
          <img src="../../../../assets/images/Vector (1).png" alt="" />
          <span class="num up">15%</span>
        </div>
        <div class="manoue">直接经济损失</div>
      </div>
      <!-- <div>
        <img src="../../../assets/images/Vector (1).png" alt="">
        <span class="num">15%</span>
      </div> -->
    </div>
    </div>
    <div class="charts">
      <div class="top_title">
        <div>人</div>
        <ul class="options">
          <li :class="{
            item: true,
            active: activeIndexState(index)
          }"  @click="activeIndex = index" v-for="(item, index) in activeItems" :key="index">{{ item.name }}</li>
        </ul>
      </div>
      <div>
        <Chart :items="chartData" :label="chartLabel" />
      </div>
    </div>
  </div>
</template>

<script>
import Chart from './Chart.vue'
import { getSxzbListToatl, getQhyyListToatl } from "@/api/index.js";
export default {
  name: 'FireIndex',
  components: {
    Chart,
  },
  props: {
    qx: String,
    type: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      activeItems: [
        {name: '火灾总数'},
        {name: '亡人'},
        {name: '伤人'},
        {name: '直接经济损失'},
        {name: '起火原因'}
      ],
      activeIndex: 0,
      data: [
        [],
        [],
        [],
        [],
        []
      ],
      params:{
        pageSize:100,
        pageNum:1
      },
      // 年份横坐标轴标签
      yearLabel: [],
      // 年份数据
      yearData: [],
      // 月份纵坐标轴标签
      monthLabel: [],
      // 月份数据
      monthData: [],
      modeType: 0,
      fireIndexLabel: [],
      fireIndexData: [],
    }
  },
  watch: {
    type: {
      handler(idx){
        this.modeType = idx
      },
      immediate: true
    }
  },
  computed: {
    chartLabel() {
      if (this.activeIndex === 4) {
        return this.fireIndexLabel[this.type]
      }
      if (this.type === 0) {
        return this.monthLabel;
      } else {
        return this.yearLabel
      }
    },
    chartData() {
      if (this.activeIndex === 4) {
        return this.fireIndexData[this.type]
      }
      if (this.type === 0) {
        return this.monthData[this.activeIndex]
      } else {
        return this.yearData[this.activeIndex];
      }
    }
  },
  methods: {
    activeIndexState(index) {
      return this.activeIndex === index
    },
    getFrieList(){
      this.loadQhyyListToatl()
      this.loadSxzbChartData()
    },
    loadQhyyListToatl() {
      getQhyyListToatl({
        ...this.params,
        qx: this.qx === '重庆市' ? "" : this.qx
      }).then(res=>{
        const temp = res.data.data
        const year =temp.qhyyListByYear
        const month = temp.qhyyListByMonth
        this.fireIndexLabel = [
          month.map(item => item.qhyy),
          year.map(item => item.qhyy)
        ]
        this.fireIndexData = [
          month.map(item => ({ name: item.qhyy, value: item.hzqs })),
          year.map(item => ({ name: item.qhyy, value: item.hzqs }))
        ]
      })
    },
    loadSxzbChartData() {
      getSxzbListToatl({
      ...this.params,
        qx: this.qx === '重庆市' ? "" : this.qx
      }).then(res => {
        const temp = res.data.data
        const year =temp.sxzbYear
        const month = temp.sxzbMonth.splice(temp.sxzbMonth.length - 12, 12)
        this.monthLabel = month.map(item => item.y)
        this.yearLabel = year.map(item => item.n)
        this.monthData = [
          month.map(item => ({ name: item.y, value: item.hzqs })),
          month.map(item => ({ name: item.y, value: item.wrs })),
          month.map(item => ({ name: item.y, value: item.sss })),
          month.map(item => ({ name: item.y, value: item.zzjjss })),
          []
        ]
        this.yearData = [
          year.map(item => ({ name: item.y, value: item.hzqs })),
          year.map(item => ({ name: item.y, value: item.wrs })),
          year.map(item => ({ name: item.y, value: item.sss })),
          year.map(item => ({ name: item.y, value: item.zzjjss })),
          []
        ]
      })
    }
  },
  created() {
    setInterval(() => {
      this.activeIndex = this.activeIndex + 1 >= this.activeItems.length ? 0 : this.activeIndex + 1
    }, 10 * 1000),
    this.getFrieList()
  }
}
</script>

<style lang="less" scoped>
.charts {
  .top_title {
    display: flex;
    justify-content: space-between;
    margin-left: 30px;
  }
  .options {
    list-style: none;
    display: flex;
    gap: 13px;
    padding: 2px 4px;
    justify-content: end;
    .item {
      color: #828a93;
      font-size: 12px;
      cursor: pointer;
    }
    .active {
      color: #00E0FF;
    }
  }
}
.fire-list {
  display: flex;
  justify-content: space-around;
  margin: 14px 2px 10px 5px;
  letter-spacing: 1px;
}
// 渐变
.fire {
  width: 105px;
  height: 40px;
  background: #2b3739;
  font-size: 12px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 3px 0;
  border-radius: 2px;
  .fire-num {
    color: #ffbf1a;
    font-size: 20px;
  }
  .num {
    font-size: 16px;
  }
  .num.up {
    color: #fb3636;
  }
  .num.down {
    color: #19f34b;
  }
}
img {
  display: inline-block;
  width: 10px;
  height: 20px;
}
.manoue {
  font-size: 12px !important;
  margin-right: 10px;
}
.money {
  margin-right: 5px;
}
</style>