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

<template>
  <div>
    <div class="left-warp">
      <div class="top-box">
        <div class="title-tip">
          <div>装备总览</div>
          <div class="more" @click="handleEquipOverview">更多 ></div>
        </div>
        <div class="equip-box">
          <div style="display: flex; flex-direction: column; align-items: center">
            <div class="equip-item-1">装备总数</div>
            <div class="equip-item-2" @click="openSystemEquip">{{ equipData.total }} <span class="unit">台</span></div>
          </div>
          <div style="display: flex; flex-direction: column; align-items: center">
            <div class="equip-item-3">总价值</div>
            <div class="equip-item-4" @click="openTotalPrice"
              >{{ (equipData.totalPrice / 100000000).toFixed(4) }} <span class="unit">亿元</span></div
            >
          </div>
        </div>
      </div>
      <div class="item-box">
        <el-row :gutter="20">
          <el-col :span="8" :offset="0">
            <EquipItem title="线路装备" :state="state1" :pieValues="list1" @openDialog="openEquipItemMore(2)" />
          </el-col>
          <el-col :span="8" :offset="0">
            <EquipItem title="变电装备" :state="state2" :pieValues="list2" @openDialog="openEquipItemMore(1)" />
          </el-col>
          <el-col :span="8" :offset="0">
            <EquipItem title="电缆装备" :state="state3" :pieValues="list3" @openDialog="openEquipItemMore(3)" />
          </el-col>
        </el-row>
      </div>
      <div class="bottom-box">
        <div class="bottom-left">
          <div class="title-tip">
            <div class="tip-title">单位装备配置</div>
            <div class="more" @click="openEquipConfig">更多 ></div>
          </div>
          <div class="bottom-list">
            <UnitEquipmentConfig />
          </div>
        </div>
      </div>
      <div class="bottom-box">
        <div class="bottom-right">
          <div class="title-tip">
            <div class="tip-title">装备状态</div>
            <div class="more" @click="openStatusMore">更多 ></div>
          </div>
          <div class="equip-status">
            <EquipStatus />
          </div>
          <div class="bottom-explain">
            <div>备注说明：再用装备包含于共享装备。</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 全量装备 -->
    <AllEquip ref="allEquip" />
    <!-- 单位装备配置 -->
    <UnitEquipConfig ref="unitEquipConfig" />
    <!-- 装备状态 -->
    <EquipStatusMore ref="equipStatusMore" />

    <TotalPriceMore ref="totalPriceMore" />
    <EquipItemMore ref="equipItemMore" />
    <SystemEquip ref="systemEquip" />
    <RemarkMore ref="remarkMore" />
  </div>
</template>

<script>
import EquipItem from './EquipItem.vue'
import UnitEquipmentConfig from './UnitEquipmentConfig.vue'
import EquipStatus from './EquipStatus.vue'
import AllEquip from './AllEquip.vue'
import UnitEquipConfig from './UnitEquipConfig.vue'
import EquipStatusMore from './EquipStatusMore.vue'
import TotalPriceMore from './TotalPriceMore.vue'
import EquipItemMore from './EquipItemMore.vue'
import SystemEquip from './SystemEquip.vue'
import RemarkMore from './RemarkMore'
import { getTotalEquipmentApi, getEquipmentClassificationApi } from '@/api/wsScreen'

export default {
  components: {
    EquipItem,
    UnitEquipmentConfig,
    EquipStatus,
    AllEquip,
    UnitEquipConfig,
    EquipStatusMore,
    EquipItemMore,
    TotalPriceMore,
    SystemEquip,
    RemarkMore,
  },
  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
      } 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.list1[0] = item.five
            this.list1[1] = item.fiveOrTen
            this.list1[2] = item.ten
          } else if (item.targetType == 'cable') {
            this.state2.num = item.num || 0
            this.state2.price = item.price || 0
            this.list2[0] = item.five
            this.list2[1] = item.fiveOrTen
            this.list2[2] = item.ten
          } else if (item.targetType == 'substation') {
            this.state3.num = item.num || 0
            this.state3.price = item.price || 0
            this.list3[0] = item.five
            this.list3[1] = item.fiveOrTen
            this.list3[2] = item.ten
          }
        })
      } catch (error) {
        console.log('🚀 ~ getEquipList ~ error:', error)
      }
    },
    handleEquipOverview() {
      this.$refs.allEquip.openDialog()
    },
    openEquipConfig() {
      this.$refs.unitEquipConfig.openDialog()
    },
    openStatusMore() {
      this.$refs.equipStatusMore.openDialog()
    },
    openTotalPrice() {
      this.$refs.totalPriceMore.openDialog()
    },
    openSystemEquip() {
      this.$refs.systemEquip.openDialog()
    },
    openEquipItemMore(type) {
      this.$refs.equipItemMore.openDialog(type)
    },
    openRemarkMore() {
      this.$refs.remarkMore.openDialog()
    },
  },
}
</script>

<style lang="scss" scoped>
.left-warp {
  height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .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; */
    height: 18%;
    background-image: url('../../img/equipmentOverview.png');
    background-size: 100% 100%;

    .equip-box {
      padding-left: 20px;
      /* margin-top: 20px; */
      /* margin-bottom: 13px; */
      height: 100px;
      background-image: url('../../img/equipmentOverviewData.png');
      background-size: 100% 100%;
      /* position: relative; */
      display: flex;
      justify-content: space-around;
      align-items: center;

      .unit {
        font-size: 15px;
        color: #ccc;
      }
      .equip-item-1 {
        margin-bottom: 15px;
      }
      .equip-item-2 {
        color: #fefbdc;
        font-size: 28px;
        font-weight: 800;
        cursor: pointer;
      }
      .equip-item-3 {
        margin-bottom: 15px;
      }
      .equip-item-4 {
        color: #fefbdc;
        font-size: 28px;
        font-weight: 800;
        cursor: pointer;
      }
    }
  }
  .item-box {
    padding: 0 20px;
  }
  .bottom-box {
    .bottom-explain {
      margin-top: 15px;
      color: #97aad6;
      font-size: 12px;
      display: flex;
      justify-content: center;
      cursor: pointer;
    }
    .bottom-tip {
    }
    .bottom-left {
      height: 210px;
      background-image: url('../../img/unit-equip.png');
      background-size: 100% 100%;
      .bottom-list {
        margin: 5px 0 10px;
        height: 165px;
        overflow: auto;
      }
    }
    .bottom-right {
      /* height: 250px; */
      background-image: url('../../img/equip-status.png');
      background-size: 100% 100%;
    }
  }
}
</style>