bonus-ui/src/views/screen/wsScreen/components/left/index.vue

<template>
  <div class="left-warp">
    <div class="top-box">
      <div class="title-tip">
        <div>装备总览</div>
        <div class="more">更多 ></div>
      </div>
      <div class="equip-box">
        <div class="equip-item-1">装备总数</div>
        <div class="equip-item-2">{{ equipData.total }} <span class="unit">台</span></div>
        <div class="equip-item-3">总价值</div>
        <div class="equip-item-4">{{ equipData.totalPrice }} <span class="unit">亿元</span></div>
      </div>
      <div class="item-box">
        <el-row :gutter="20">
          <el-col :span="8" :offset="0">
            <EquipItem title="线路装备" :state="state1" :pieValues="list1" />
          </el-col>
          <el-col :span="8" :offset="0">
            <EquipItem title="变电装备" :state="state2" :pieValues="list2" />
          </el-col>
          <el-col :span="8" :offset="0">
            <EquipItem title="电缆装备" :state="state2" :pieValues="list3" />
          </el-col>
        </el-row>
      </div>
      <div class="bottom-box">
        <el-row :gutter="20">
          <el-col :span="13" :offset="0">
            <div class="bottom-left">
              <div class="title-tip">
                <div class="tip-title">单位装备配置</div>
                <div class="more">更多 ></div>
              </div>
              <div class="bottom-list">
                <UnitEquipmentConfig />
              </div>
            </div>
            <div class="bottom-explain">
              <div>备注说明：</div>
              <div>
                <div>施工装备配置率=∑ⁿ¹专用装备实际配置率+∑ⁿ¹新型装备实际配置率 </div>
                <div>装备实际配置率=实际装配配置数量÷基本配置标准数量×装备赋值×配置折算率 </div>
                <div>专用装备满分80分，创新装备满分20分，满分100分</div>
              </div>
            </div>
          </el-col>
          <el-col :span="11" :offset="0">
            <div class="bottom-right">
              <div class="title-tip">
                <div class="tip-title">装备状态</div>
                <div class="more">更多 ></div>
              </div>
              <div class="equip-status">
                <EquipStatus />
              </div>
            </div>
            <div class="bottom-explain">
              <div>备注说明：再用装备包含与共享装备。</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import EquipItem from './EquipItem.vue'
import UnitEquipmentConfig from './UnitEquipmentConfig.vue'
import EquipStatus from './EquipStatus.vue'
import { getTotalEquipmentApi, getEquipmentClassificationApi } from '@/api/wsScreen'

export default {
  components: { EquipItem, UnitEquipmentConfig, EquipStatus },
  data() {
    return {
      // 装备总览
      equipData: {
        total: 0, // 装备总数
        totalPrice: 0, // 总价值
      },
      state1: {},
      state2: {},
      state3: {},
      list1: [],
      list2: [],
      list3: [],
    }
  },
  created() {
    this.getInfo()
    this.getEquipList()
  },
  methods: {
    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 / 100000000
      } catch (error) {
        console.log('🚀 ~ getInfo ~ error:', error)
      }
    },
    async getEquipList() {
      try {
        const { data } = await getEquipmentClassificationApi()
        console.log('🚀 ~ getEquipList ~ data:', data)
        this.state1.num = data.line.num || 0
        this.state1.price = data.line.price || 0
        this.state2.num = data.cable.num || 0
        this.state2.price = data.cable.price || 0
        this.state3.num = data.substation.num || 0
        this.state3.price = data.substation.price || 0
        this.list1[0] = data.line.five
        this.list1[1] = data.line.fiveOrTen
        this.list1[2] = data.line.ten
        this.list2[0] = data.cable.five
        this.list2[1] = data.cable.fiveOrTen
        this.list2[2] = data.cable.ten
        this.list3[0] = data.substation.five
        this.list3[1] = data.substation.fiveOrTen
        this.list3[2] = data.substation.ten
        console.log('🚀 ~ getEquipList ~ this.list1:', this.list1)
        console.log('🚀 ~ getEquipList ~ this.state3:', this.state3)
      } catch (error) {
        console.log('🚀 ~ getEquipList ~ error:', error)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.left-warp {
  margin-top: 80px;
  margin-left: 100px;
  .title-tip {
    display: flex;
    justify-content: space-between;
    padding-top: 8px;
    padding-left: 40px;
    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: #5fbbdb;
      cursor: pointer;
      font-weight: 600;
      font-family: '';
    }
  }
  .top-box {
    height: 350px;
    background-image: url('../../img/equipmentOverview.png');
    background-size: 100% 100%;

    .equip-box {
      margin-left: -15px;
      margin-top: 20px;
      height: 120px;
      background-image: url('../../img/equipmentOverviewData.png');
      background-size: 100% 100%;
      position: relative;

      .unit {
        font-size: 15px;
        color: #ccc;
      }
      .equip-item-1 {
        position: relative;
        left: 230px;
        top: 20px;
      }
      .equip-item-2 {
        position: relative;
        left: 230px;
        top: 40px;
        color: #fefbdc;
        font-size: 28px;
        font-weight: 800;
      }
      .equip-item-3 {
        position: relative;
        left: 760px;
        top: -40px;
      }
      .equip-item-4 {
        position: relative;
        left: 760px;
        top: -20px;
        color: #fefbdc;
        font-size: 28px;
        font-weight: 800;
      }
    }

    .item-box {
      padding: 0 20px;
      height: 230px;
    }
  }
  .bottom-box {
    .bottom-explain {
      margin-top: 30px;
      color: #97aad6;
      font-size: 12px;
      display: flex;
    }
    .bottom-tip {
    }
    .bottom-left {
      height: 300px;
      background-image: url('../../img/unit-equip.png');
      background-size: cover;
      .bottom-list {
        margin-top: 20px;
        height: 260px;
        overflow: auto;
      }
    }
    .bottom-right {
      height: 300px;
      background-image: url('../../img/equip-status.png');
      background-size: cover;
    }
  }
}
</style>