cxc/data_visual
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

gantt

Browse Source
This commit is contained in:
cxc
2022-11-14 16:31:47 +08:00
parent 8422f5312e
commit a11f5c03c8
52 changed files with 4027 additions and 425 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/views/Overview/ProjectTotal.vue
View File

@ -1,14 +1,24 @@
<template>
<div class="container flex items-center justify-start">
<img class="icon" src="@/assets/polygon40@3x.png" alt="" />
<div class="title text-white">项目总人数</div>
<div class="counting-board flex justify-between">
<div class="num" v-for="item in countChars" :key="item">{{ item }}</div>
<div class="container">
<div class="project-total flex items-center justify-start">
<img class="icon" src="@/assets/polygon40@3x.png" alt="" />
<div class="title text-white">项目总数</div>
<div class="counting-board flex justify-between">
<div class="num" v-for="item in countChars" :key="item">{{ item }}</div>
</div>
</div>
<div class="acceptance flex items-center justify-start">
<img class="icon" src="@/assets/polygon40@3x.png" alt="" />
<div class="title text-white">在建/验收</div>
<!-- <div class="counting-board flex justify-between"></div> -->
<div class="num">
<span>12</span><span class="seg mx-1">/</span><span>23</span>
</div>
</div>
</div>
</template>
<script setup>
import { ref, toRefs } from "vue";
import { ref, toRefs, watch } from "vue";
const props = defineProps({
data: {
type: Object,
@ -17,15 +27,26 @@ const props = defineProps({
});
const { data } = toRefs(props);
const countChars = ref([]);
countChars.value = `${parseInt(data.value.PROJECTCOUNT)}`.split("");
for (let i = countChars.value.length; i < 4; i++) {
countChars.value.unshift("0");
}
watch(
data,
() => {
if (data.value.PROJECTCOUNT) {
countChars.value = `${parseInt(data.value.PROJECTCOUNT)}`.split("");
} else {
countChars.value = ["0"];
}
for (let i = countChars.value.length; i < 4; i++) {
countChars.value.unshift("0");
}
},
{ immediate: true, deep: true }
);
</script>
<style lang="scss" scoped>
.container {
width: 465px;
height: 90px;
// height: 90px;
background-image: linear-gradient(
180deg,
rgba(4, 53, 99, 0.6) 0%,
@ -72,5 +93,28 @@ for (let i = countChars.value.length; i < 4; i++) {
}
}
}
.project-total {
height: 90px;
}
.acceptance {
height: 45px;
color: #fff;
.num {
display: flex;
align-items: center;
margin-left: 30px;
span {
font-family: PingFangSC-Regular;
font-size: 28px;
color: #b1e1ff;
letter-spacing: 0;
line-height: 24px;
text-shadow: 0 0 9px #158eff;
font-weight: 400;
}
// span.seg {
// }
}
}
}
</style>