hb_sis_zhfx/src/views/SandTable/component/p-panel.vue

<template>
  <div class="p-panel">
    <div class="p-panel-title font-sm">{{ title }}</div>
    <div class="p-panel-body">
      <div class="pp-info">
        <div class="pp-info-days">
          <span class="font-num green font-lg pp-info-days-num">{{
            days
          }}</span>
          <span class="gray font-sm">{{ daysUnit }}</span>
        </div>
        <div class="pp-info-data">
          <span class="gray-l font-sm">{{ data1Str }}</span>
          <span class="pp-icon-l svg-icon" :class="data1IconClass">
            <svg-icon :svgid="data1Icon" />
          </span>
          <span class="gray-l font-sm">{{ data2Str }}</span>
          <span class="pp-icon-r svg-icon" :class="data2IconClass">
            <svg-icon :svgid="data2Icon" />
          </span>
        </div>
      </div>
      <div class="pp-data">
        <div class="pp-tip" :style="'margin-left: ' + data * 100 + '%'">
          <div class="pp-tip-data font-sm">
            {{
              flip
                ? ((1 - data) * 100).toFixed(2) + "%"
                : (data * 100).toFixed(2) + "%"
            }}
          </div>
          <div class="pp-tip-icon">
            <i
              class="el-icon-caret-bottom font-sm"
              :style="'color: ' + dataColor"
            ></i>
          </div>
        </div>
        <div
          class="pp-data-box"
          :style="
            'border-color: ' + dataColor + '4d; background: ' + backColor + ';'
          "
        >
          <div class="pp-data-split" v-for="index of 19" :key="index"></div>
          <div
            class="pp-data-num"
            :style="
              'width: ' + data * 100 + '%; background: ' + dataColor + ';'
            "
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SvgIcon from "@com/coms/icon/svg-icon.vue";
export default {
  // 名称
  name: "Ppanel",
  // 使用组件
  components: {
    SvgIcon,
  },
  // 传入参数
  props: {
    title: {
      type: String,
      default: "利用小时",
    },
    days: {
      type: Number,
      default: 88.5,
    },
    daysUnit: {
      type: String,
      default: "小时",
    },
    data1Str: {
      type: String,
      default: "环",
    },
    data1IconClass: {
      type: String,
      default: "svg-icon-sm svg-icon-green",
    },
    data1Icon: {
      type: String,
      default: "svg-arrow-up-1",
    },
    data2Str: {
      type: String,
      default: "同",
    },
    data2Icon: {
      type: String,
      default: "svg-arrow-dpwn-1",
    },
    data2IconClass: {
      type: String,
      default: "svg-icon-sm svg-icon-yellow",
    },
    data: {
      type: Number,
      default: 0.75,
    },
    flip: {
      type: Boolean,
      default: false,
    },
    dataColor: {
      type: String,
      default: "#05BB4C",
    },
    backColor: {
      type: String,
      default: "#4B55AE",
    },
  },
  emits: {},
  // 数据
  data() {
    return {};
  },
  // 函数
  methods: {},
  // 生命周期钩子
  beforeCreate() {
    // 创建前
  },
  created() {
    // 创建后
  },
  beforeMount() {
    // 渲染前
  },
  mounted() {
    // 渲染后
  },
  beforeUpdate() {},
  updated() {},
};
</script>

<style lang="less">
.p-panel {
  background: #1a1f2fcc;
  width: 206px;

  .font-sm {
    font-size: 12px;
  }

  .font-lg {
    font-size: 16px;
  }

  .p-panel-title {
    height: 2.778vh;
    line-height: 2.778vh;
    text-align: center;
    color: #ffffff;
    border-bottom: 1px solid #ffffff66;
  }

  .p-panel-body {
    .pp-info {
      padding-top: 1.111vh;
      display: flex;

      .pp-info-days-num {
        padding: 1.204vh 0.926vh 0 1.944vh;
      }

      .pp-info-data {
        margin-left: auto;

        .pp-icon-l {
          padding: 1.111vh 1.037vh 0 0.556vh;
        }

        .pp-icon-r {
          padding: 1.111vh 0.833vh 0 0.556vh;
        }
      }
    }

    .pp-data {
      padding: 0.741vh 0.556vh 1.389vh 0.556vh;
      .pp-tip {
        display: inline-block;

        .pp-tip-data,
        .pp-tip-icon {
          margin-left: -100%;
          text-align: center;
        }

        .pp-tip-icon {
          margin-top: -0.37vh;
        }
      }

      .pp-data-box {
        height: 0.741vh;
        width: 190px;
        border: 1px solid;
        position: relative;
        display: flex;
        transform: skewX(-25deg);

        .pp-data-split {
          width: 10px;
          height: 100%;
          z-index: 2;
          transition: 0.2s;

          + .pp-data-split {
            border-left: 1px solid #172f2e;
          }
        }

        .pp-data-num {
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
          z-index: 1;
        }
      }
    }
  }
}
</style>