bonus-ui/src/views/home/components/provincial/Top1.vue

<template>
  <div>
    <TitleBox titleText="装备总览" @handleMore="handleMore" />

    <!-- 上 -->
    <div class="top-box">
      <!-- 左 -->
      <div class="top-item">
        <div class="item-left">
          <div class="item-title">装备总数</div>
          <div>
            <span class="price-text">{{ equipData.total }}</span>
            <span class="unit-text"> 台</span>
          </div>
        </div>
        <img src="@/assets/images/total-num.png" class="img-pos" alt="" />
      </div>
      <!-- 右 -->
      <div class="top-item" @click="openTotalPrice">
        <div class="item-left">
          <div class="item-title">总价值</div>
          <div>
            <span class="price-text">{{ equipData.totalPrice }}</span>
            <span class="unit-text"> 万元</span>
          </div>
        </div>
        <img src="@/assets/images/total-price.png" class="img-pos" alt="" />
      </div>
    </div>

    <!-- 下 -->
    <div class="bottom-box">
      <div class="bottom-item-1">
        <div class="bt-title">线路装备</div>
        <div>装备数</div>
        <div class="num-text">{{ state1.num }}<span class="unit-text"> 台</span></div>

        <div>装备价值</div>
        <div class="num-text">{{ state1.price }}<span class="unit-text"> 万元</span></div>

        <div class="bt-title" style="margin-top: 20px">装备年限</div>
        <div>
          <span>5年以内 </span>
          <span class="num-text" style="color: #2cbab2"
            >{{ state1.five > 0 ? ((state1.five / state1.num) * 100).toFixed(1) : 0 }}%</span
          >
        </div>
        <div>
          <span>5年-10年 </span>
          <span class="num-text" style="color: #4eacff"
            >{{ state1.fiveOrTen > 0 ? ((state1.fiveOrTen / state1.num) * 100).toFixed(1) : 0 }}%</span
          >
        </div>
        <div>
          <span>10年以上 </span>
          <span class="num-text" style="color: #feaf6a"
            >{{ state1.ten > 0 ? ((state1.ten / state1.num) * 100).toFixed(1) : 0 }}%</span
          >
        </div>
      </div>

      <div class="bottom-item-2">
        <div class="bt-title">变电装备</div>
        <div>装备数</div>
        <div class="num-text">{{ state2.num }}<span class="unit-text"> 台</span></div>

        <div>装备价值</div>
        <div class="num-text">{{ state2.price }}<span class="unit-text"> 万元</span></div>

        <div class="bt-title" style="margin-top: 20px">装备年限</div>
        <div>
          <span>5年以内 </span>
          <span class="num-text" style="color: #2cbab2"
            >{{ state2.five > 0 ? ((state2.five / state2.num) * 100).toFixed(1) : 0 }}%</span
          >
        </div>
        <div>
          <span>5年-10年 </span>
          <span class="num-text" style="color: #4eacff"
            >{{ state2.fiveOrTen > 0 ? ((state2.fiveOrTen / state2.num) * 100).toFixed(1) : 0 }}%</span
          >
        </div>
        <div>
          <span>10年以上 </span>
          <span class="num-text" style="color: #feaf6a"
            >{{ state2.ten > 0 ? ((state2.ten / state2.num) * 100).toFixed(1) : 0 }}%</span
          >
        </div>
      </div>

      <div class="bottom-item-3">
        <div class="bt-title">电缆装备</div>
        <div>装备数</div>
        <div class="num-text">{{ state3.num }}<span class="unit-text"> 台</span></div>

        <div>装备价值</div>
        <div class="num-text">{{ state3.price }}<span class="unit-text"> 万元</span></div>

        <div class="bt-title" style="margin-top: 20px">装备年限</div>
        <div>
          <span>5年以内 </span>
          <span class="num-text" style="color: #2cbab2"
            >{{ state3.five > 0 ? ((state3.five / state3.num) * 100).toFixed(1) : 0 }}%</span
          >
        </div>
        <div>
          <span>5年-10年 </span>
          <span class="num-text" style="color: #4eacff"
            >{{ state3.fiveOrTen > 0 ? ((state3.fiveOrTen / state3.num) * 100).toFixed(1) : 0 }}%</span
          >
        </div>
        <div>
          <span>10年以上 </span>
          <span class="num-text" style="color: #feaf6a"
            >{{ state3.ten > 0 ? ((state3.ten / state3.num) * 100).toFixed(1) : 0 }}%</span
          >
        </div>
      </div>
    </div>

    <!-- 全量装备 -->
    <AllEquip ref="allEquip" />
    <!-- 总价值 -->
    <TotalPriceMore ref="totalPriceMore" />
  </div>
</template>

<script>
import { getTotalEquipmentApi, getEquipmentClassificationApi } from '@/api/wsScreen'
import TitleBox from '../TitleBox'
import AllEquip from '@/views/home/components/provincial/Dialog/AllEquip'
import TotalPriceMore from '@/views/home/components/provincial/Dialog/TotalPriceMore'

export default {
  name: 'Top1',
  components: {
    TitleBox,
    AllEquip,
    TotalPriceMore,
  },
  data() {
    return {
      equipData: {
        total: 0, // 装备总数
        totalPrice: 0, // 总价值
      },
      state1: {
        num: 0,
        price: 0,
        five: 0,
        fiveOrTen: 0,
        ten: 0,
      },
      state2: {
        num: 0,
        price: 0,
        five: 0,
        fiveOrTen: 0,
        ten: 0,
      },
      state3: {
        num: 0,
        price: 0,
        five: 0,
        fiveOrTen: 0,
        ten: 0,
      },
      list1: [],
      list2: [],
      list3: [],
    }
  },
  created() {
    this.getInfo()
    this.getEquipList()
  },
  mounted() {},
  methods: {
    handleMore() {
      this.$refs.allEquip.openDialog()
    },
    openTotalPrice() {
      this.$refs.totalPriceMore.openDialog()
    },
    async getInfo() {
      try {
        const res = await getTotalEquipmentApi()
        console.log('🚀 ~ getInfo ~ res:', res)
        this.equipData.total = res.data.totalEquipmentQuantity || 0
        this.equipData.totalPrice = res.data.totalValue
      } catch (error) {
        console.log('🚀 ~ getInfo ~ error:', error)
      }
    },
    async getEquipList() {
      try {
        const { data } = await getEquipmentClassificationApi()
        console.log('🚀 ~ getEquipList ~ data:', data)
        if (!data || data.length === 0) return
        data.forEach((item) => {
          if (item.targetType == 'line') {
            this.state1.num = item.num || 0
            this.state1.price = item.price || 0
            this.state1.five = item.five
            this.state1.fiveOrTen = item.fiveOrTen
            this.state1.ten = item.ten
          } else if (item.targetType == 'cable') {
            this.state2.num = item.num || 0
            this.state2.price = item.price || 0
            this.state2.five = item.five
            this.state2.fiveOrTen = item.fiveOrTen
            this.state2.ten = item.ten
          } else if (item.targetType == 'substation') {
            this.state3.num = item.num || 0
            this.state3.price = item.price || 0
            this.state3.five = item.five
            this.state3.fiveOrTen = item.fiveOrTen
            this.state3.ten = item.ten
          }
        })
      } catch (error) {
        console.log('🚀 ~ getEquipList ~ error:', error)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.top-box {
  margin-top: 16px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .top-item {
    cursor: pointer;
    position: relative;
    width: 50%;
    padding: 12px;
    width: 208px;
    height: 92px;
    box-shadow: 0px 3px 1px 0px #e9f2f3;
    border-radius: 5px;
    background: linear-gradient(113deg, #dbfdfe 0%, #f9fffb 100%);

    .item-left {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      z-index: 2;
    }

    .img-pos {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 64px;
      height: 59px;
    }
  }

  .item-title {
    margin-bottom: 10px;
    font-weight: 400;
    font-size: 14px;
    color: #333;
  }
}
.price-text {
  font-family: OPPOSans;
  font-size: 24px;
  color: #333;
}
.num-text {
  font-family: OPPOSans;
  font-size: 16px;
  color: #333;
}
.unit-text {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 12px;
  color: #808080;
}

.bottom-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 22px;
  text-align: left;

  .bottom-item-1,
  .bottom-item-2,
  .bottom-item-3 {
    padding: 8px;
    width: 137px;
    height: 314px;
    border-radius: 5px;
    div {
      line-height: 32px;
    }

    .bt-title {
      font-size: 16px;
      line-height: 24px;
    }
  }

  .bottom-item-1 {
    background: linear-gradient(0deg, #fef8ea 0%, rgba(255, 255, 255, 0.26) 100%);
  }
  .bottom-item-2 {
    background: linear-gradient(0deg, rgba(78, 172, 255, 0.07) 0%, rgba(255, 255, 255, 0.26) 100%);
  }
  .bottom-item-3 {
    background: linear-gradient(0deg, rgba(44, 186, 178, 0.07) 0%, rgba(255, 255, 255, 0.26) 100%);
  }
}
</style>