zhgkpt-datav/app/src/views/FireCondition/components/FireDistribution.vue

<template >
  <div style="padding: 6px;">
    <div>
      <button-group @change="changeHandler">
        <button-group-item> <span style="color: #79e7ff;"> 火灾起数</span> </button-group-item>
        <button-group-item> <span style="color: #79e7ff;"> 死亡人数 </span> </button-group-item>
      </button-group>
    </div>
    <div>
      <div class="row header">
        <span class="type">序号</span>
        <span class="count">区县</span>
        <span class="time">{{ ['火灾总数', '死亡人数'][idx]}}</span>
        <span class="unit">同比</span>
      </div>
      <VueSeamlessScroll v-if="reload" :data="list" :class-option="classOption" class="warp">
        <ul class="item">
          <li class="row" :class="{
            active: item.isActive
          }" v-for="(item, index) in list" :key="index">
            <span class="type">{{ index + 1 }}</span>
            <span class="count">{{ item.qx }}</span>
            <span class="time">{{ [item.bnhzqs, item.bnwrs ][idx] }}</span>
            <span class="unit">{{ [item.hzPercent, item.wrPercent ][idx] }}
              <img v-if="[item.hzIcon, item.wrIcon ][idx]" :src="[item.hzIcon, item.wrIcon ][idx]" alt="" />
            </span>
          </li>
        </ul>
      </VueSeamlessScroll>
    </div>
  </div>
</template>

<script>
import VueSeamlessScroll from "vue-seamless-scroll";
import upIcon from '../../../assets/images/up-icon.svg';
import downIcon from '../../../assets/images/down-icon.svg';
import { fireDistribution } from '@/api/hzfx'
import { toFirst } from '@/utils'

export default {
  name: 'FireDistribution',
  components: {
    VueSeamlessScroll
  },
  props: {
    qx: String
  },
  data() {
    return {
      idx: 0,
      list: [],
      reload: true
    };
  },
  created() {
    this.loadData()
  },
  watch: {
    qx() {
      this.loadData();
    }
  },
  methods: {
    changeHandler(idx) {
      this.idx = idx;
    },
    getPercent(bn, tq) {
      if (bn - tq === 0) {
        return '0%'
      }
      if (tq === 0) {
        return '100%'
      }
      return `${(parseInt((Math.abs(bn - tq) / tq).toFixed(2) * 100 ))}%`
    },
    getIcon(bn, tq) {
      if (bn -tq > 0) {
        return upIcon;
      } else if (bn - tq < 0){
        return downIcon;
      } else {
        return null;
      }
    },
    loadData() {
      this.reload = false
      fireDistribution({
        pageSize: 100,
        pageNum: 1,
        // qx: this.qx
      }).then(res => {
        let tempData = res.data.rows.map(item => ({...item,
          hzPercent: this.getPercent(item.bnhzqs, item.tqhzqs),
          wrPercent: this.getPercent(item.bnwrs, item.tqwrs),
          hzIcon: this.getIcon(item.bnhzqs, item.tqhzqs),
          wrIcon: this.getIcon(item.bnwrs, item.tqwrs),
          isActive: item.qx === this.qx
        }))
        this.list = toFirst(tempData, this.qx, 'qx')
        this.reload = true
      })
    }
  },
  computed: {
    classOption() {
      return {
        singleHeight: 51,
        autoPlay: this.qx === ""
      };
    },
  },
}
</script>

<style scoped lang='less'>

.warp {
  height: 521px;
  margin: 0 auto;
  overflow: hidden;
  .item {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    cursor: pointer;
  }
}

.header {
  color: #61DBFF !important;
  height: 38px !important;
  background-color: rgba(0, 163, 255, 0.3) !important;
  margin-top: 2px;
  letter-spacing: 1px;
  .is_notice {
    line-height: 19px;
    font-size: 10px;
  }
}

li.row > span {
  text-align: center;
  font-size: 14x;
  position: relative;
  display: inline-block;
}

li.row.active {
  background-color: rgba(0, 213, 255, 0.2);
}

li.row {
  box-sizing: border-box;
}

.row,
li,
a {
  display: block;
  height: 46px;
  line-height: 46px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  background-color: rgba(0, 0, 0, 0.2);
  color: #fff;
  margin-top: 5px;
  .time,
  .type,
  .count,
  .unit{
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0.25;
    img {
      display: inline-block;
      width: 11px;
      height: 16px;
      margin-left: 5px;
    }
  }

  .time {
    color: #61DBFF;
  }
}
</style>