<template>
  <div style="position: relative; width: 130px; height:140px; float: left;">
    <img src="@/assets/image/warehouse.png" style="height: 100px;width:120px">
    <div class="ModelFont">55%</div>
    <!-- <dv-percent-pond :config="config" style="width:1rem; height:0.5rem;position: absolute; top: 0.6rem; left: 0.35rem;" /> -->
  </div>
</template>

<script>
  const fullWidth = 300
  const borderGap = 3
  const borderWidth = 3
  const usefulWidth = fullWidth - (borderGap + borderWidth) * 2

  const pieceLength = [0.25, 0.5, 0.25]
  const pieceGap = 3

  const lineDash = pieceLength
    .map(l => [usefulWidth * l, pieceGap])
    .reduce((all, current) => [...all, ...current], [])

  export default {
    data() {
      return {
        config: {
          value: 55,
          colors: ['#01c4f9', '#c135ff'],
          lineDash
        }
      }
    },
  }
</script>

<style scoped>

</style>
