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

<template>
  <div>
    <div class="fire-list">
    <!-- 火灾总数 -->
    <div class="fire" @click="openFire">
      <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" @click="openFire">
      <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" @click="openFire">
      <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" @click="openFire">
      <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"  :type="activeIndex" :show="type" />
      </div>
    </div>
    <basic-modal top="120px" ref="basicInfoModal1" name="历史火灾查询">
			<hzfbCont :default="defaultModal" :qy="qx" />
		</basic-modal>
  </div>
</template>

<script>
import Chart from './Chart.vue'
import { getSxzbListToatl, getQhyyListToatl, getHzzbSxzbYoy } from "@/api/index.js";
import hzfbCont from '../../../FireCondition/components/hzfbCont.vue';
import moment from 'moment';
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: {},
      defaultModal: []
    }
  },
  watch: {
    type: {
      handler(idx){
        this.modeType = 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, index) => ({ 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)
        // console.log('009988--------',month);
        this.monthData = [
          month.map((item,index) =>  month.length - 1 === index ? ({ name: item.qhyy, value: item.hzqs, itemStyle: {
            color: "#cccccc89",
          } }) : ({ name: item.y, value: item.hzqs })),
          month.map(item => ({ name: item.y, value: item.wrs })),
          month.map(item => ({ name: item.y, value: item.srs })),
          month.map(item => ({ name: item.y, value: parseInt(item.zzjjss / 10000) })),
          []
        ]
        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.srs })),
          year.map(item => ({ name: item.y, value: parseInt(item.zzjjss / 10000) })),
          []
        ]
      })
    },
    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: `${Math.ceil(Math.abs(tempData.wrstb))}%`,
            srsp:  `${Math.ceil(Math.abs(tempData.srstb))}%`,
            zzjjssp: `${Math.ceil(Math.abs(tempData.zzjjsstb))}%`,
            hzqsp: `${Math.ceil(Math.abs(tempData.hzqstb))}%`
          }
        } 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: `${Math.ceil(Math.abs(tempData.wrstb))}%`,
            srsp:  `${Math.ceil(Math.abs(tempData.srstb))}%`,
            zzjjssp: `${Math.ceil(Math.abs(tempData.zzjjsstb))}%`,
            hzqsp: `${ Math.ceil(Math.abs(tempData.hzqstb))}%`
          }
        } else {
          this.yearTbData = {
            wrs: 0,
            srs: 0,
            zzjjss: 0,
            hzqs: 0,
            wrstb: 0,
            srstb: 0,
            zzjjsstb: 0,
            hzqstb: 0,
            wrsp: `-`,
            srsp:  `-`,
            zzjjssp: `-`,
            hzqsp: `-`
          }
        }
      })
    },
    openFire(){
      const date = new Date();
      const type = ['month', 'year'][this.modeType]
      this.defaultModal = {
          queryRqTime: [moment(date).startOf(type).toDate(), moment(date).endOf(type).toDate()],
      }
      this.showModal("basicInfoModal1");
    }
  },
  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 29px;
    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: 165px;
  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: 15px;
  }
  .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>