Skip to content

V
VUE3仪表盘

weixin_38687364 / VUE3仪表盘
与 Fork 源项目一致

Fork自 inscode / VueJS

通知 2
Star 3
Fork 0
V
VUE3仪表盘
提交 a6e7ed9b 编写于 作者: 6 64493bc96180332c2cd697c0
浏览文件
操作

Auto Commit

上级 c6a2b7ef
隐藏空白更改
内联 并排
Showing with 192 addition and 193 deletion
package.json
浏览文件 @ a6e7ed9b
...@@ -12,6 +12,8 @@ ...@@ -12,6 +12,8 @@
}, },
"devDependencies": { "devDependencies": {
"@vitejs/plugin-vue": "^3.0.1", "@vitejs/plugin-vue": "^3.0.1",
"sass": "^1.63.6",
"sass-loader": "^13.3.2",
"vite": "^3.0.1" "vite": "^3.0.1"
} }
} }
src/components/Dashboard.vue
浏览文件 @ a6e7ed9b
<template> <template>
<div class="cont"> <div class="layout">
<div class="layout"> <div class="das-warpper">
<div class="das-warpper"> <div class="das">
<div class="das"> <div class="diamond-warpper" :id="'war' + ran">
<div class="diamond-warpper"> <span class="diamond">
<span class="diamond"> <span class="triangle-top"></span>
<span class="triangle-top"></span> <span class="triangle-down"></span>
<span class="triangle-down"></span> </span>
</span>
</div>
<div
class="annular"
:style="
'background: linear-gradient(90deg, #1c81cf 0%, transparent ' +
per +
'%);'
"
></div>
<div class="text-warpper"></div>
<div class="text">{{ per }}%</div>
</div> </div>
</div> <div
<div class="bottom-box"> class="annular"
<span class="left-gradient"></span> :style="
<span class="title">{{ title }}</span> 'background: linear-gradient(90deg, #1c81cf 0%, transparent ' +
<span class="right-gradient"></span> per +
'%);'
"
></div>
<div class="text-warpper"></div>
<div class="text">{{ per }}%</div>
</div> </div>
</div> </div>
</div> <div class="bottom-box">
</template> <span class="left-gradient"></span>
<script setup> <span :style="'font-size: ' + fontSize + 'px;'" class="title">{{
import { ref, onMounted, watch } from "vue"; title
import { toRefs } from "vue"; }}</span>
const props = defineProps({ <span class="right-gradient"></span>
title: { </div>
type: String, </div>
default: "VIP会议室 - 1", </template>
}, <script setup>
per: { import { ref, onMounted, watch } from "vue";
type: Number, import { toRefs } from "vue";
default: 75, const props = defineProps({
}, title: {
}); type: String,
const { title, per } = toRefs(props); default: "仪表盘",
console.log(title.value, per.value); },
watch( per: {
() => per.value, type: Number,
(newVal, oldVal) => { default: 75,
console.log(newVal, oldVal); },
changeper(); fontSize: {
} type: Number,
); default: 12,
},
const changeper = () => { });
let p = per.value; const { title, per } = toRefs(props);
let deg = (180 * p) / 100 - 90; console.log(title.value, per.value);
// 修改annular样式 watch(
const annular = document.querySelector(".annular"); () => per.value,
annular.style.background = `linear-gradient(90deg, #1c81cf 0%, transparent ${per}%)`; (newVal, oldVal) => {
// 修改diamond - warpper 样式 console.log(newVal, oldVal);
const diamondWarpper = document.querySelector(".diamond-warpper"); changeper();
diamondWarpper.style.transform = `rotateZ(${deg}deg)`;
diamondWarpper.style.animation = `run${p} 2s 1`;
// 创建新的 keyframes 规则
const newKeyFrames = `@keyframes run${p} {
from {
transform: rotateZ(-90deg);
}
to {
transform: rotateZ(${deg}deg);
}
}`;
// 将原有的 keyframes 规则替换为新的规则
const styleSheet = document.styleSheets[0];
styleSheet.deleteRule(0);
styleSheet.insertRule(newKeyFrames, 0);
};
</script>
<style scoped>
.cont{
background-color: #0a1b49;
color: #fff;
width: 160px;
height: 110px;
}
.das-warpper {
height: 81px;
overflow: hidden;
}
.das {
box-sizing: border-box;
position: relative;
width: 150px;
height: 150px;
border: 1px dashed #1a75bf;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
} }
.annular { );
display: flex; onMounted(() => {
justify-content: center; changeper();
align-items: center; });
width: 90%; let ran = ref(Math.floor(Math.random() * 100) + per.value);
height: 90%; const changeper = () => {
border-radius: 50%; let p = per.value;
let deg = (180 * p) / 100 - 90;
-webkit-mask: radial-gradient(transparent, transparent 60%, #000 60%); const newKeyFrames = `@keyframes run${ran.value} {
} from {
.diamond-warpper { transform: rotateZ(-90deg);
position: absolute;
display: inline-block;
width: 50%;
height: 90%;
z-index: 200;
transform: rotateZ(45deg);
display: flex;
justify-content: center;
align-items: flex-start;
animation: run 2s 1;
}
.diamond {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
} }
.triangle-top { to {
width: 0; transform: rotateZ(${deg}deg);
height: 0; }
border-left: 4px solid transparent; }`;
border-right: 4px solid transparent; // // 将原有的 keyframes 规则替换为新的规则
border-bottom: 10px solid #00a0e9; const styleSheet = document.styleSheets[0];
margin-bottom: -1px; // styleSheet.deleteRule(0);
} styleSheet.insertRule(newKeyFrames, 0);
.triangle-down { const diamondWarpper = document.getElementById("war" + ran.value);
width: 0; diamondWarpper.style = `transform:rotateZ(${deg}deg);animation : run${ran.value} 2s 1;`;
height: 0; // diamondWarpper.style.animation = `run${ran} 2s 2`;
border-left: 4px solid transparent; };
border-right: 4px solid transparent; </script>
border-top: 10px solid #00a0e9; <style lang="css" scoped>
} .das-warpper {
.bottom-box { height: 75px;
width: 100%; overflow: hidden;
position: absolute; }
display: flex;
justify-content: center; .das {
align-items: center; box-sizing: border-box;
bottom: -25px; position: relative;
width: 130px;
} height: 130px;
.text-warpper { border: 1px dashed #1a75bf;
position: absolute; border-radius: 100%;
width: 40%; display: flex;
height: 40%; justify-content: center;
border-radius: 100%; align-items: center;
z-index: 200; }
}
.text { .das .annular {
position: absolute; display: flex;
top: 30%; justify-content: center;
font-size: 30px; align-items: center;
font-weight: bold; width: 90%;
z-index: 300; height: 90%;
} border-radius: 50%;
.left-gradient { -webkit-mask: radial-gradient(transparent, transparent 60%, #000 60%);
width: 20px; }
height: 5px;
background: linear-gradient(to left, #1c81cf, transparent); .das .diamond-warpper {
} position: absolute;
.right-gradient { display: inline-block;
width: 20px; width: 50%;
height: 5px; height: 90%;
z-index: 200;
background: linear-gradient(to right, #1c81cf, transparent); display: flex;
} justify-content: center;
.title { align-items: flex-start;
border-radius: 5px; }
font-size: 12px;
text-align: center; .das .diamond-warpper .diamond {
margin: 0px 4px; display: flex;
} align-items: center;
.layout { justify-content: center;
width: 150px; flex-direction: column;
position: relative; }
display: flex;
flex-direction: column; .das .diamond-warpper .diamond .triangle-top {
align-items: center; width: 0;
} height: 0;
</style> border-left: 4px solid transparent;
border-right: 4px solid transparent;
\ No newline at end of file border-bottom: 10px solid #00a0e9;
margin-bottom: -1px;
}
.das .diamond-warpper .diamond .triangle-down {
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 10px solid #00a0e9;
}
.das .text-warpper {
position: absolute;
width: 40%;
height: 40%;
border-radius: 100%;
z-index: 200;
}
.das .text {
position: absolute;
top: 30%;
font-size: 30px;
font-weight: bold;
z-index: 300;
}
.bottom-box {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-top: 3px;
}
.bottom-box .left-gradient {
width: 20px;
height: 5px;
background: linear-gradient(to left, #1c81cf, transparent);
}
.bottom-box .right-gradient {
width: 20px;
height: 5px;
background: linear-gradient(to right, #1c81cf, transparent);
}
.bottom-box .title {
border-radius: 5px;
font-size: 12px;
text-align: center;
margin: 0px 4px;
}
.layout {
width: 150px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或