utils-＞frame-＞vue-＞shape

电池

<template>
  <div class="root flexRow">
    <div class="battery flexRow">
      <div class="battery_item flexColumn" v-for="(item, index) in (100/5)" :key="index">
      <!-- {{item}} -->
          <div class="radio"  :style="`min-height:${item*5<num||item*5==num?100:
          item*5>num&&(item*5-5)<num?((5-item*5+num)/5*100):
          
          0}%`"></div>
        <div class="radioRemind" style="flex:1"></div>
      </div>
    </div>
  {{Number(num).toFixed(0)}}%
  </div>
</template>

<script>
var timer;

// import "./css/changeEle.scss";

export default {
  filters: {},
  props: {
    num: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      type: 0
    };
  },
  computed: {
    batteryRadio: () => {
      return (Number(this.num) / 5) | 0;
    },
    batteryRemaind: () => {
      return Number((Number(this.num) % 5).toFixed(2));
    }
  },
  watch: {
    // show: {
    //   deep: true,
    //   handler(val) {
    //   }
    // },
  },
  created() {},
  beforeDestroy() {
    if (timer) {
      //定时器存在则清除
      clearTimeout(timer);
    }
  },
  methods: {
    /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    //                               页面登入的数据请求和渲染实体函数
    /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    //                               事件函数
    /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    //                               工具函数
    /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
  }
};
</script>
<style lang="scss" scoped>
.root {
  width: 100%;
  padding-right: 30px;
  align-items: center;
  font-family: MicrosoftYaHei;
  font-size: 14px;
  color: #ffffff;
  letter-spacing: 0;
  .battery {
    background-color: #444f5d;
    width: 100%;
    padding: 4px;
    margin-right: 8px;
    border-radius: 3px;
    .battery_item {
      flex: 1;
      height: 25px;
     
      border-radius: 2px;
      .radio{
          width: 100%;
           background-color: #3399FF;
      }
      .radioRemind{
           width: 100%;
           background-color: #80a1c1;
      }
    }
    .battery_item:not(:last-child) {
      margin-right: 3px;
    }
  }
}
</style>

计数板

<template>
  <div class="root flexRow">
    <div class="flexRow villagersBasicList">
      <div
        class="flexColumn villagersBasicItem"
        v-for="(item, index) in certificationArray"
        :key="index"
      >
        <span class="top" :style="index % 2 == 0 ? 'color: #E0482E;' : ''">{{
          item.manageValue
        }}</span>
        <span class="bottom">{{ item.manageKey }}</span>
      </div>
    </div>
  </div>
</template>

<script>
var timer;

// import "./css/changeEle.scss";

export default {
  filters: {},
  props: {
    num: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      certificationArray: [],
    };
  },
  computed: {
    // batteryRadio: () => {
    //   return (Number(this.num) / 5) | 0;
    // },
    // batteryRemaind: () => {
    //   return Number((Number(this.num) % 5).toFixed(2));
    // }
  },
  watch: {
    // show: {
    //   deep: true,
    //   handler(val) {
    //   }
    // },
  },
  created() {
    var _this = this;
    var certificationArray = String(this.num).split("");
    _this.certificationArray =
      certificationArray.length == 6
        ? certificationArray
        : certificationArray.length < 6
        ? [
            ...new Array(6 - certificationArray.length).fill(0),
            ...certificationArray,
          ]
        : "";
  },
  beforeDestroy() {
    if (timer) {
      //定时器存在则清除
      clearTimeout(timer);
    }
  },
  methods: {
    /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    //                               页面登入的数据请求和渲染实体函数
    /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    //                               事件函数
    /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    //                               工具函数
    /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
  },
};
</script>
<style lang="scss" scoped>
.scoreboard {
  justify-content: space-between;
}
.scoreboardItem {
  position: relative;
}
.verticleCenter {
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}
.textEvey {
  font-family: Helvetica-Bold;
  font-size: 58px;
  color: #ffcc00;
  letter-spacing: 0;
}

.topDiv,
.bottomDiv {
  background: #072b5e;
  border-radius: 3px;
  height: 40px;
  width: 60px;
}
.topDiv {
  margin-bottom: 2px;
}
</style>

圆柱

<template>
  <div class="root flexRow">
    <div class="cylinderList flexColumn">
      <div
        class="blockItem"
        v-for="(item, index) in valuelist"
        :key="index"
        :style="`height:${item.value}%`"
      >
        <div
          class="maskTop"
          v-if="index == 0"
          :labelTooltip="Number(item.value).toFixed(2) + '%'"
        ></div>
        <div
          class="top"
          :style="`border-color:#${colorlist[index % 4]};`"
          v-if="index == 0"
        ></div>
        <div
          class="center"
          :labelTooltip="Number(item.value).toFixed(2) + '%'"
          :style="`background:#${colorlist[index % 4]};`"
        ></div>
        <div
          class="bottom"
          :labelTooltip="Number(item.value).toFixed(2) + '%'"
          :style="
            `border-color:#${colorlist[index % 4]};z-index:${valuelist.length -
              index +
              1};`
          "
        ></div>
      </div>
    </div>

    <div class="textList flexColumn" v-if="showtext">
      <div
        class="textItem flexRow"
        v-for="(item, index) in valuelist"
        :key="index"
        :style="`height:${item.value}%;`"
      >
        <div class="line"></div>

        <div class="overflow-ellipsis">
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
var timer;

// import "./css/changeEle.scss";

export default {
  filters: {},
  props: {
    colorlist: {
      type: Array,

      default: () => {
        return ["CB9922", "9F372E", "52AFF1", "0784DB"];
      }
    },
    valuelist: {
      type: Array,
      default: () => {
        return [{ name: "", value: 100 }];
      }
    },
    showtext: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      type: 0
    };
  },
  watch: {
    // show: {
    //   deep: true,
    //   handler(val) {
    //   }
    // },
  },
  created() {},
  beforeDestroy() {
    if (timer) {
      //定时器存在则清除
      clearTimeout(timer);
    }
  },
  methods: {
    /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    //                               页面登入的数据请求和渲染实体函数
    /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    //                               事件函数
    /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    //                               工具函数
    /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
  }
};
</script>
<style lang="scss" scoped>
.root {
  padding-top: 30px;

  padding-bottom: 20px;
  .cylinderList {
    height: 100%;
    .blockItem {
      position: relative;
      .maskTop {
        position: absolute;

        top: -15.1px;
        left: 0;

        width: 80px;
        height: 30px;
        border-radius: 100%;

        z-index: 100;
        background-color: rgba(0, 0, 0, 0.2);
      }
      .top {
        position: absolute;

        top: -15px;
        left: 0;

        width: 0px;
        height: 0px;

        border-width: 7.5px 40px;

        border-style: solid;
        border-radius: 50% / 100% 100% 0 0;
      }
      .center {
        height: 100%;
        width: 80px;
      }
      .bottom {
        position: absolute;
        bottom: -15px;
        left: 0;

        width: 0px;
        height: 0px;

        border-width: 7.5px 40px;

        border-style: solid;
        border-radius: 50% / 0 0 100% 100%;
      }
    }
    .blockItem .maskTop:hover:after,
    .blockItem .center:hover:after,
    .blockItem .bottom:hover:after {
      position: absolute;
      left: 70%;
      top: 30%;
      padding: 5px;
      background-color: white;
      border-radius: 5px;
      transform: translate(0%, -50%);
      color: #999;
      /*这里显示的内容为表格中自定义的labelTooltip属性对应的值*/
      content: attr(labelTooltip);
      z-index: 1000;
      font-size: 12px;
    }
  }
  .textList {
    height: 100%;
    max-width: 80px;
    .line {
      height: 0;
      width: 21px;
      flex-basis: 21px;
      border-top: 1px solid #2e425a;
      margin-right: 2px;
    }
    .textItem {
      align-items: center;
      font-family: MicrosoftYaHei;
      font-size: 14px;
      color: #cee1f6;
      letter-spacing: 0;
    }
  }
}
.overflow-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>