init

.svn/pristine/3a/3a3c24a4df46f4cbbe8e0894c4c14e349f8563b7.svn-base

@@ -0,0 +1,143 @@
+<script lang="ts">
+export default {
+  name: "LayProgress",
+};
+</script>
+
+<script setup lang="ts">
+import "./index.less";
+import { computed } from "vue";
+
+export interface ProgressProps {
+  percent: number | string;
+  theme?: string;
+  color?: string;
+  size?: string;
+  showText?: boolean;
+  text?: string;
+  circle?: boolean;
+  circleSize?: number;
+  circleWidth?: number;
+}
+
+const props = withDefaults(defineProps<ProgressProps>(), {
+  circle: false,
+  circleSize: 150,
+  circleWidth: 6,
+});
+
+const styles = computed(() => {
+  return [
+    props.color ? "background-color: " + props.color : "",
+    {
+      width: props.percent + "%",
+    },
+  ];
+});
+
+const getCircleColor = computed(() => {
+  let color;
+  switch (props.theme) {
+    case "red":
+      color = "#ff5722";
+      break;
+    case "orange":
+      color = "#ffb800";
+      break;
+    case "green":
+      color = "#009688";
+      break;
+    case "cyan":
+      color = "#2f4056";
+      break;
+    case "blue":
+      color = "#1e9fff";
+      break;
+    case "black":
+      color = "#393d49";
+      break;
+    case "gray":
+      color = "#fafafa";
+      break;
+    default:
+      color = "#5FB878";
+      break;
+  }
+  color = props.color ? props.color : color;
+  return color;
+});
+
+const getCircleRotate = computed(() => {
+  let percent;
+  if (typeof props.percent == "string") {
+    percent = parseInt(props.percent);
+  } else {
+    percent = props.percent;
+  }
+  return (percent / 100) * 360;
+});
+
+const getStrokeDasharray = computed(() => {
+  let percent;
+  if (typeof props.percent == "string") {
+    percent = parseInt(props.percent);
+  } else {
+    percent = props.percent;
+  }
+  let radii = props.circleSize / 2 - props.circleWidth / 2;
+  let perimeter = Math.PI * 2 * radii;
+  return `${(percent / 100) * perimeter}px ${perimeter}px`;
+});
+
+const getPathD = computed(() => {
+  let circleSize = props.circleSize;
+  let circleWidth = props.circleWidth;
+  return `M ${circleSize / 2} ${circleSize / 2} m 0, -${
+    (circleSize - circleWidth) / 2
+  } a ${(circleSize - circleWidth) / 2}, ${
+    (circleSize - circleWidth) / 2
+  } 0 1, 1 0, ${circleSize - circleWidth} a ${
+    (circleSize - circleWidth) / 2
+  }, ${(circleSize - circleWidth) / 2} 0 1, 1 0, -${circleSize - circleWidth}`;
+});
+</script>
+
+<template>
+  <div class="lay-progress-circle" v-if="circle">
+    <svg
+      :viewBox="`0 0 ${circleSize} ${circleSize}`"
+      :width="circleSize"
+      :height="circleSize"
+    >
+      <path
+        :d="getPathD"
+        style="fill: none; stroke: var(--global-neutral-color-3)"
+        :style="{ strokeWidth: `${circleWidth}px` }"
+      ></path>
+      <path
+        :d="getPathD"
+        style="fill: none; stroke-linecap: round"
+        :style="{
+          strokeDasharray: getStrokeDasharray,
+          stroke: getCircleColor,
+          strokeWidth: `${circleWidth}px`,
+        }"
+      ></path>
+    </svg>
+    <div class="layui-progress-text lay-progress-circle__text" v-if="showText">
+      {{ text ? text : percent + "%" }}
+    </div>
+  </div>
+
+  <div class="layui-progress" :class="'layui-progress-' + size" v-else>
+    <div
+      class="layui-progress-bar"
+      :class="'layui-bg-' + theme"
+      :style="styles"
+    >
+      <span v-if="showText" class="layui-progress-text">
+        {{ text ? text : percent + "%" }}
+      </span>
+    </div>
+  </div>
+</template>

.svn/pristine/3a/3aac7d492643d86888ac496725ea10efc4abd4b8.svn-base

@@ -0,0 +1,2 @@
+@import "./variable.less";
+@import "./public.less";

.svn/pristine/3a/3acfe89402f95fbf11ca63159ccb16e7d8fca974.svn-base

@@ -0,0 +1,4 @@
+x
e<><65>j<EFBFBD>0<0C>w<EFBFBD>S<08>X<><0E>A<12>2;<3B><>pR<70>\<5C><>JY<4A><59><EFBFBD>S<EFBFBD>vk<76><6B><EFBFBD><EFBFBD><EFBFBD>?<3F><>;:x~yzhr<68>\d<><64><EFBFBD>Fs֭¯<12>;z<><7A> {<7B>
+<EFBFBD><EFBFBD>c<EFBFBD><EFBFBD>Q͵j<EFBFBD>ga<EFBFBD><EFBFBD>?d<>1<EFBFBD><31>1<><31><EFBFBD><08>hw<68>>R<>y<EFBFBD><79>« sr<73><72>o<EFBFBD>B<EFBFBD>hIno#<23><><02>jV<6A><0F><12><>_<EFBFBD>Ј<EFBFBD><D088>pI<70>BޗX<05><>r<05>

+<EFBFBD>"<22>
.<2E>`<60>
}<7D><>s<08><>Dפ<44><D7A4><EFBFBD><EFBFBD>,<2C>>.]<5D><>6<EFBFBD>ڽY<DABD><59>W/͍<>va<76><0E><><10>el<65><6C><EFBFBD><EFBFBD>zos6<73><36>it91m<31>9h<39><68><EFBFBD><EFBFBD><EFBFBD>~L9<4C>
+<0E><><EFBFBD> <20>t<EFBFBD><74>_<EFBFBD><5F><12><><EFBFBD>f+<2B>V<EFBFBD><56><EFBFBD><EFBFBD>
<01>ڟ<EFBFBD>