bonus-ui/src/views/screen/gwScreen/components/right/EquipUsageRate.vue

<template>
  <div>
    <div class="title-tip">
      <div class="small_title">装备在用率统计</div>
      <div class="more" @click="openDialog">更多 ></div>
    </div>
    <!-- <div style="width: 25%; height: 100%; display: flex; align-items: center; justify-content: space-between">
      <div :class="tabIndex == 0 ? 'topTab1 fs-24 active1' : 'topTab1 fs-24'" @click="changTab(0)">总体</div>
      <div :class="tabIndex == 1 ? 'topTab2 fs-24 active2' : 'topTab2 fs-24'" @click="changTab(1)">线路</div>
      <div :class="tabIndex == 2 ? 'topTab2 fs-24 active2' : 'topTab2 fs-24'" @click="changTab(2)">变电</div>
      <div :class="tabIndex == 3 ? 'topTab3 fs-24 active3' : 'topTab3 fs-24'" @click="changTab(3)">电缆</div>
    </div> -->

    <div class="item-list">
      <div class="item" :class="`item-bg-${index + 1}`" v-for="(item, index) in tableList" :key="index">
        <div style="text-align: center; margin-top: 20px;font-size: 14px;">{{ item.name || '-' }}</div>
        <div style="margin: 109px 0 0 42px"
          ><span style="font-size: 12px; color: #ccc;font-weight: 300;">在用率</span> <span class="num">{{ item.proportion || 0 }} %</span></div
        >
        <div style="margin-left: 42px"
          ><span style="font-size: 12px; color: #ccc;font-weight: 300;">周转率</span> <span class="num" >{{ item.turnoverRate || 0 }}</span> <span style="font-size: 12px;font-weight: 300;">次/年</span></div
        >
      </div>
    </div>

    <!-- 更多 -->
    <EquipUsageRateMore ref="equipUsageRateMore" />
  </div>
</template>

<script>
import { getUsageStatisticsApi } from '@/api/wsScreen'
import EquipUsageRateMore from './EquipUsageRateMore'

export default {
  components: { EquipUsageRateMore },
  data() {
    return {
      tabIndex: 0,
      tableList: [],
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    changTab(type) {
      console.log('🚀 ~ changTab ~ type:', type)
      this.tabIndex = type
      this.getInfo()
    },
    async getInfo() {
      try {
        let type = 0
        if (this.tabIndex == 0) {
          type = ''
        } else if (this.tabIndex == 1) {
          type = 1
        } else if (this.tabIndex == 2) {
          type = 2
        } else if (this.tabIndex == 3) {
          type = 3
        }
        const res = await getUsageStatisticsApi({ type })
        if (!res.data) return
        if (res.data.length > 5) {
          this.tableList = res.data.slice(0, 5)
        } else {
          this.tableList = res.data
        }
        console.log('🚀 ~ 装备在用率统计 ~ res:', res)
      } catch (error) {
        console.log('🚀 ~ 装备在用率统计 ~ error:', error)
      }
    },
    openDialog() {
      console.log('🚀 ~ openDialog ~ openDialog:')
      this.$refs.equipUsageRateMore.openDialog()
    },
  },
}
</script>

<style lang="scss" scoped>
.title-tip {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  padding-left: 45px;
  font-family: DS-TITLE;
  background: linear-gradient(to bottom, #f0f5f8, #5eb6f0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  .more {
    margin-right: 20px;
    color: #5b99ad;
    cursor: pointer;
    font-weight: 400;
    font-family: '';
    font-size: 12px;
    /* 清除背景渐变相关属性 */
    background: none;
    background-clip: unset;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: #5b99ad;
  }

  .small_title {
    margin-left: 10px;
    font-size: 20px;
    font-weight: 500;
    background: linear-gradient(180deg, #FFF 19.35%, #5DCBFE 77.42%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }      
}
.num {
  font-size: 14px;
  font-family: 'DIN';
}

.topView {
  width: 100%;
  height: 16%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fs-24 {
  margin-top: 10px;
  font-size: 15px;
  padding: 5px;
  cursor: pointer;
}
.topTab1 {
  width: 33%;
  height: 80%;
  color: #45adf1;
  background-image: url('../../../../../assets/cityScreen/tab11.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.topTab2 {
  width: 33%;
  height: 80%;
  color: #45adf1;
  background-image: url('../../../../../assets/cityScreen/tab21.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.topTab3 {
  width: 33%;
  height: 80%;
  color: #45adf1;
  background-image: url('../../img/tab31.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.active1 {
  background-image: url('../../img/tab12.png');
}
.active2 {
  background-image: url('../../img/tab22.png');
}
.active3 {
  background-image: url('../../img/tab32.png');
}

.item-list {
  margin-top: 15px;
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  .item {
    width: 190px;
    height: 220px;
    font-weight: bolder;
    margin-right: 22px;
  }
  .item-bg-1 {
    background-image: url('../../img/list-1.png');
    background-size: 100% 100%;
  }
  .item-bg-2 {
    background-image: url('../../img/list-2.png');
    background-size: 100% 100%;
  }
  .item-bg-3 {
    background-image: url('../../img/list-3.png');
    background-size: 100% 100%;
  }
  .item-bg-4 {
    background-image: url('../../img/list-4.png');
    background-size: 100% 100%;
  }
  .item-bg-5 {
    background-image: url('../../img/list-5.png');
    background-size: 100% 100%;
  }
}
</style>