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

<template>
  <div>
    <div class="fire-list" @click="$emit('open')">
    <!-- 火灾总数 -->
    <div class="fire" >
      <div>
        <div>
          <span class="fire-num">{{ tbData.hzqs }}</span>
          <span>起</span>
        </div>
        <div>火灾总数</div>
      </div>
      <div>
        <img v-if="tbData.hzqstb > 0" src="../../../../assets/images/Vector (1).png" alt="" />
        <img v-if="tbData.hzqstb < 0"  src="../../../../assets/images/Vector (2).png" alt="" />
        <span class="num" :class="{
          up: tbData.hzqstb > 0,
          down: tbData.hzqstb < 0,
        }" >{{ tbData.hzqstb === 0 ? '-' : tbData.hzqsp }}</span>
      </div>
    </div>
    <!--亡人  -->
    <div class="fire">
      <div>
        <div>
          <span class="fire-num">{{ tbData.wrs  }}</span>
          <span>人</span>
        </div>
        <div>亡人</div>
      </div>
      <div>
        <img v-if="tbData.wrstb > 0" src="../../../../assets/images/Vector (1).png" alt="" />
        <img v-if="tbData.wrstb < 0"  src="../../../../assets/images/Vector (2).png" alt="" />
        <span class="num" :class="{
           up: tbData.wrstb > 0,
          down: tbData.wrstb < 0,
        }">{{ tbData.wrstb === 0 ? '-' : tbData.wrsp }}</span>
      </div>
    </div>
    <!-- 伤人 -->
    <div class="fire" >
      <div>
        <div>
          <span class="fire-num">{{ tbData.srs  }}</span>
          <span>人</span>
        </div>
        <div>伤人</div>
      </div>
      <div>
        <img v-if="tbData.srstb > 0" src="../../../../assets/images/Vector (1).png" alt="" />
        <img v-if="tbData.srstb < 0"  src="../../../../assets/images/Vector (2).png" alt="" />
        <span class="num " :class="{
           up: tbData.srstb > 0,
          down: tbData.srstb < 0,
        }"  >{{ tbData.srstb === 0 ? '-' : tbData.srsp }}</span>
      </div>
    </div>
    <!-- 直接经济损失 -->
    <div class="fire">
      <div>
        <div>
          <span class="fire-num">{{ tbData.zzjjss }}</span>
          <span class="money">万元</span>
          <img v-if="tbData.zzjjsstb > 0" src="../../../../assets/images/Vector (1).png" alt="" />
          <img v-if="tbData.zzjjsstb < 0"  src="../../../../assets/images/Vector (2).png" alt="" />
          <span class="num" :class="{
          up: tbData.zzjjsstb > 0,
          down: tbData.zzjjsstb < 0,
        }">{{ tbData.zzjjsstb === 0 ? '-' : tbData.zzjjssp }}</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>{{ unitLabel }}</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, getHzzbSxzbYoy } from "@/api/index.js";
import hzfbCont from '../../../FireCondition/components/hzfbCont.vue';
export default {
  name: 'FireIndex',
  components: {
    Chart,
    hzfbCont
  },
  props: {
    qx: String,
    type: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      activeItems: [
        {name: '火灾总数'},
        {name: '亡人'},
        {name: '伤人'},
        {name: '直接经济损失'},
        {name: '起火原因'}
      ],
      activeIndex: 0,
      unitLabels: ["起", "人", "人", "万元", "起"],
      data: [
        [],
        [],
        [],
        [],
        []
      ],
      params:{
        pageSize:100,
        pageNum:1
      },
      // 年份横坐标轴标签
      yearLabel: [],
      // 年份数据
      yearData: [],
      // 月份纵坐标轴标签
      monthLabel: [],
      // 月份数据
      monthData: [],
      modeType: 0,
      fireIndexLabel: [],
      fireIndexData: [],
      monthTbData: {},
      yearTbData: {}
    }
  },
  watch: {
    type: {
      handler(idx){
        this.modeType = idx
        this.getFrieList()
        console.log("--------------", idx)
      },
      immediate: true
    },
    qx() {
      this.getFrieList()
    }
  },
  computed: {
    unitLabel() {
      return this.unitLabels[this.activeIndex]
    },
    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];
      }
    },
    tbData() {
      return [this.yearTbData , this.monthTbData][this.modeType]
    }
  },
  methods: {
    activeIndexState(index) {
      return this.activeIndex === index
    },
    getFrieList(){
      this.loadQhyyListToatl()
      this.loadSxzbChartData()
      this.loadHzzbSxzbYoy()
    },
    loadQhyyListToatl() {
      getQhyyListToatl({
        ...this.params,
        qy: 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,
        qy: 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 / 10000).toFixed(0) })),
          []
        ]
        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 / 10000).toFixed(0) })),
          []
        ]
      })
    },
    loadHzzbSxzbYoy() {
      getHzzbSxzbYoy({
        qy: this.qx === '重庆市' ? "" : this.qx
      }).then(res => {
        const temp = res.data.data
        if (temp['年同比'].length === 1) {
          let tempData = temp['年同比'][0]
          this.monthTbData = {
            wrs: tempData.wrs,
            srs: tempData.srs,
            zzjjss: parseInt(tempData.zzjjss / 10000),
            hzqs: tempData.hzqs,
            wrstb: tempData.wrstb,
            srstb: tempData.srstb,
            zzjjsstb: tempData.zzjjsstb,
            hzqstb: tempData.hzqstb,
            wrsp: `${parseInt(Math.abs(tempData.wrstb) * 100)}%`,
            srsp:  `${parseInt(Math.abs(tempData.srstb) * 100)}%`,
            zzjjssp: `${parseInt(Math.abs(tempData.zzjjsstb) * 100)}%`,
            hzqsp: `${parseInt( Math.abs(tempData.hzqstb) * 100)}%`
          }
        } else {
          this.monthTbData = {
            wrs: 0,
            srs: 0,
            zzjjss: 0,
            hzqs: 0,
            wrstb: 0,
            srstb: 0,
            zzjjsstb: 0,
            hzqstb: 0,
            wrsp: `-`,
            srsp:  `-`,
            zzjjssp: `-`,
            hzqsp: `-`
          }
        }
        if (temp['月同比'].length === 1) {
          let tempData = temp['月同比'][0]
          this.yearTbData = {
            wrs: tempData.wrs,
            srs: tempData.srs,
            zzjjss: parseInt(tempData.zzjjss / 10000),
            hzqs: tempData.hzqs,
            wrstb: tempData.wrstb,
            srstb: tempData.srstb,
            zzjjsstb: tempData.zzjjsstb,
            hzqstb: tempData.hzqstb,
            wrsp: `${parseInt(Math.abs(tempData.wrstb) * 100)}%`,
            srsp:  `${parseInt(Math.abs(tempData.srstb) * 100)}%`,
            zzjjssp: `${parseInt(Math.abs(tempData.zzjjsstb) * 100)}%`,
            hzqsp: `${parseInt( Math.abs(tempData.hzqstb) * 100)}%`
          }
        } else {
          this.yearTbData = {
            wrs: 0,
            srs: 0,
            zzjjss: 0,
            hzqs: 0,
            wrstb: 0,
            srstb: 0,
            zzjjsstb: 0,
            hzqstb: 0,
            wrsp: `-`,
            srsp:  `-`,
            zzjjssp: `-`,
            hzqsp: `-`
          }
        }
      })
    }
  },
  created() {
    setInterval(() => {
      this.activeIndex = this.activeIndex + 1 >= this.activeItems.length ? 0 : this.activeIndex + 1
    }, 30 * 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;
		cursor: pointer;
		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>