xjsaas-ui/src/views/big-screen/overview-components/patrol-order.vue

<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-10-18 10:25:29
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-11-13 14:01:48
 * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\work-order.vue
 * @Description: 总览大屏-巡查里程
-->

<template>
  <div class="content">
    <div class="patrol-div">
      <div class="value">
        <span>{{ formatNumber(patrolObject.len) }}</span
        >km
      </div>
    </div>
    <div class="patrol-div">
      <div class="value">
        <span>{{ formatTime(patrolObject.time) }}</span
        >h
      </div>
    </div>
  </div>
</template>
  
  <script>
import { getMileage } from "@/api/xj/screen/disease-screen";
export default {
  name: "PatrolOrder",
  data() {
    return {
      // 累计里程数据
      patrolObject: {},
    };
  },
  created() {
    this.getData();
  },
  methods: {
    /* 获取巡查里程数据 */
    getData() {
      getMileage().then(({ code, data }) => {
        if (code === 200) {
          this.patrolObject = data;
        }
      });
    },

    /* 累计里程修改 */
    formatNumber(num) {
      if (num >= 100000000) {
        // 超过1亿显示 x.xx亿
        return (num / 100000000).toFixed(2) + "亿";
      } else if (num >= 10000) {
        // 超过1万显示 x.xx万
        return (num / 10000).toFixed(2) + "万";
      } else {
        // 小于1万直接返回原数字
        return num;
      }
    },

    /* 累计时长修改 */
    formatTime(num){
      if (num >= 100000000) {
        // 超过1亿显示 x.xx亿
        return (num / 100000000).toFixed(2) + "亿";
      } else if (num >= 10000) {
        // 超过1万显示 x.xx万
        return (num / 10000).toFixed(2) + "万";
      } else {
        // 小于1万直接返回原数字
        return num;
      }
    }
  },
};
</script>
  
  <style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  color: #ffffff;
  background: url("~@/assets/screen/disease/patrol-order.png") no-repeat;
  background-size: 90%;
  background-position: 50%;

  .patrol-div {
    width: 50%;
    height: 100%;
    padding-left: 5rem;
    padding-bottom: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;

    .value {
      span {
        font-family: "DouYu";
        font-size: 1.4rem;
      }
    }
  }
}
</style>