@ued_fpi/data-visual/dist/lib/bmp/src/AlgaeMonitoring/components/ProgressBar.vue.js

<br /> <br /> <div style="text-align:center"> <b style="font-size:30px">@ued_fpi/data-visual</b> <p>基于Vite4+TypeScript的Vue3大屏组件库开发框架</p> <img style="display:inline" src="https://img.shields.io/npm/v/@ued_fpi/data-visual" />

'use strict';

Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });

const vue = require('vue');

const _hoisted_1 = {
  viewBox: "0 0 100 100",
  class: "progress-bar"
};
const _hoisted_2 = {
  id: "grad1",
  x1: "0%",
  y1: "0%",
  x2: "0%",
  y2: "100%"
};
const _hoisted_3 = /* @__PURE__ */ vue.createElementVNode("stop", {
  class: "grad1-stop1",
  offset: "0%"
}, null, -1);
const _hoisted_4 = ["offset", "stop-opacity"];
const _hoisted_5 = {
  id: "grad2",
  x1: "0%",
  y1: "0%",
  x2: "0%",
  y2: "100%"
};
const _hoisted_6 = ["stop-opacity"];
const _hoisted_7 = ["offset"];
const _hoisted_8 = ["stroke-dasharray"];
const _hoisted_9 = ["stroke-dasharray"];
const pie = 3.141592653;
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "ProgressBar",
  props: {
    rate: { default: 0 }
  },
  setup(__props) {
    const props = __props;
    const r = vue.ref(45);
    const perimeter = r.value * pie * 2;
    const leftPathShow = vue.ref(false);
    const leftDasharray = vue.ref("");
    const leftOffset = vue.ref("0%");
    const leftColorOPacity = vue.ref(0);
    const rightPathShow = vue.ref(false);
    const rightDasharray = vue.ref("");
    const rightOffset = vue.ref("0%");
    vue.watchEffect(() => {
      if (props.rate === 0) {
        leftPathShow.value = false;
        rightPathShow.value = false;
      } else if (props.rate <= 0.5) {
        leftPathShow.value = true;
        rightPathShow.value = false;
        leftDasharray.value = `${perimeter * props.rate} ${perimeter * (0.5 - props.rate)}`;
        leftOffset.value = `${props.rate * 200}%`;
        leftColorOPacity.value = 1;
      } else {
        leftPathShow.value = true;
        rightPathShow.value = true;
        leftDasharray.value = `${perimeter} 0`;
        leftOffset.value = "100%";
        const rightRate = props.rate - 0.5;
        rightDasharray.value = `${perimeter * rightRate} ${perimeter * (0.5 - rightRate)} `;
        rightOffset.value = `${rightRate * 200}%`;
        leftColorOPacity.value = 0.5 / props.rate;
      }
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1, [
        vue.createElementVNode("defs", null, [
          vue.createElementVNode("linearGradient", _hoisted_2, [
            _hoisted_3,
            vue.createElementVNode("stop", {
              class: "grad1-stop2",
              offset: vue.unref(leftOffset),
              "stop-opacity": vue.unref(leftColorOPacity)
            }, null, 8, _hoisted_4)
          ]),
          vue.createElementVNode("linearGradient", _hoisted_5, [
            vue.createElementVNode("stop", {
              class: "grad2-stop1",
              offset: "0%",
              "stop-opacity": vue.unref(leftColorOPacity)
            }, null, 8, _hoisted_6),
            vue.createElementVNode("stop", {
              class: "grad2-stop2",
              offset: vue.unref(rightOffset)
            }, null, 8, _hoisted_7)
          ])
        ]),
        vue.unref(leftPathShow) ? (vue.openBlock(), vue.createElementBlock("path", {
          key: 0,
          d: "M50,55 m0,-48, a43,43,0,1,0,0,86",
          fill: "none",
          stroke: "url(#grad1)",
          "stroke-width": "6",
          "stroke-dasharray": vue.unref(leftDasharray)
        }, null, 8, _hoisted_8)) : vue.createCommentVNode("", true),
        vue.unref(rightPathShow) ? (vue.openBlock(), vue.createElementBlock("path", {
          key: 1,
          d: "M50,55 m0,-48, a43,43,0,1,0,0,86",
          fill: "none",
          stroke: "url(#grad2)",
          "stroke-width": "6",
          "stroke-dasharray": vue.unref(rightDasharray),
          transform: "rotate(180 50,50)"
        }, null, 8, _hoisted_9)) : vue.createCommentVNode("", true)
      ]);
    };
  }
});

exports.default = _sfc_main;