feat: 数据大屏
JINGYJ
2 years ago
parent
c628527c2e
commit
b23858a41b
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 3.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 737 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
@ -0,0 +1,41 @@
|
||||
<svg width="38" height="26" viewBox="0 0 38 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_iiii_181_1048)">
|
||||
<path d="M0 2C0 0.89543 0.895431 0 2 0H36C37.1046 0 38 0.895431 38 2V24C38 25.1046 37.1046 26 36 26H2C0.89543 26 0 25.1046 0 24V2Z" fill="url(#paint0_linear_181_1048)" fill-opacity="0.32"/>
|
||||
<path d="M14.8749 7L12.25 9.25L14.8749 11.875" stroke="white" stroke-opacity="0.8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12.25 9.25H20.8727C23.4538 9.25 25.6458 11.3576 25.7464 13.9375C25.8527 16.6636 23.6002 19 20.8727 19H14.4994" stroke="white" stroke-opacity="0.8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_iiii_181_1048" x="-1" y="-1" width="40" height="28" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="1"/>
|
||||
<feGaussianBlur stdDeviation="1"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.12 0 0 0 0 0.777349 0 0 0 0 1 0 0 0 0.4 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_181_1048"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-1"/>
|
||||
<feGaussianBlur stdDeviation="1"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.12 0 0 0 0 0.777349 0 0 0 0 1 0 0 0 0.4 0"/>
|
||||
<feBlend mode="normal" in2="effect1_innerShadow_181_1048" result="effect2_innerShadow_181_1048"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="1"/>
|
||||
<feGaussianBlur stdDeviation="1"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.12 0 0 0 0 0.777349 0 0 0 0 1 0 0 0 0.4 0"/>
|
||||
<feBlend mode="normal" in2="effect2_innerShadow_181_1048" result="effect3_innerShadow_181_1048"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="-1"/>
|
||||
<feGaussianBlur stdDeviation="1"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.12 0 0 0 0 0.777349 0 0 0 0 1 0 0 0 0.4 0"/>
|
||||
<feBlend mode="normal" in2="effect3_innerShadow_181_1048" result="effect4_innerShadow_181_1048"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_181_1048" x1="19" y1="0" x2="19" y2="26" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#1FC6FF"/>
|
||||
<stop offset="1" stop-color="#1FC6FF" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
@ -0,0 +1,271 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive } from "vue";
|
||||
|
||||
const state = reactive({
|
||||
time_type_select: "month"
|
||||
});
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
is_date_select: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
|
||||
const is_date_selected_class = time_type => {
|
||||
if (state.time_type_select === time_type) {
|
||||
return "date-selected";
|
||||
} else {
|
||||
return "date-unselected";
|
||||
}
|
||||
};
|
||||
|
||||
const set_date_type = time_type => {
|
||||
state.time_type_select = time_type;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="box_container">
|
||||
<div class="box_header_line" />
|
||||
<div class="box_header">
|
||||
<div class="header_title">{{ props.title }}</div>
|
||||
<div class="header_time" v-if="is_date_select">
|
||||
<div
|
||||
@click="set_date_type('month')"
|
||||
:class="is_date_selected_class('month')"
|
||||
>
|
||||
月
|
||||
</div>
|
||||
<div
|
||||
@click="set_date_type('week')"
|
||||
:class="is_date_selected_class('week')"
|
||||
>
|
||||
周
|
||||
</div>
|
||||
<div
|
||||
@click="set_date_type('day')"
|
||||
:class="is_date_selected_class('day')"
|
||||
>
|
||||
日
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box_content">
|
||||
<div class="content">
|
||||
<slot name="content" :time_type="state.time_type_select" />
|
||||
</div>
|
||||
<div class="element1">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="3"
|
||||
viewBox="0 0 20 3"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M3.52755 0H19.5541L16.0265 3H0L3.52755 0Z"
|
||||
fill="#1FC6FF"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="element2" />
|
||||
<div class="element3">
|
||||
<div class="sub1" />
|
||||
<div class="sub2" />
|
||||
<div class="sub3" />
|
||||
</div>
|
||||
<div class="element4">
|
||||
<div class="sub1" />
|
||||
<div class="sub2-container">
|
||||
<div class="sub2" />
|
||||
<div class="sub2" />
|
||||
<div class="sub2" />
|
||||
</div>
|
||||
<div class="sub2-container">
|
||||
<div class="sub2" />
|
||||
<div class="sub2" />
|
||||
<div class="sub2" />
|
||||
</div>
|
||||
<div class="sub1" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.box_container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.box_header_line {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #136480;
|
||||
}
|
||||
|
||||
.box_header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 44px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgb(31 180 255 / 12%) 0%,
|
||||
rgb(31 180 255 / 0%) 100%
|
||||
);
|
||||
|
||||
.header_title {
|
||||
margin-left: 20px;
|
||||
font-family: "Helvetica Neue", Helvetica, "PingFang SC",
|
||||
"Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.header_time {
|
||||
display: flex;
|
||||
|
||||
.date-selected {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: flex-start;
|
||||
width: 38px;
|
||||
height: 28px;
|
||||
padding: 4px 12px;
|
||||
margin-left: 8px;
|
||||
font-family: "Helvetica Neue", Helvetica, "PingFang SC",
|
||||
"Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
color: #1fc6ff;
|
||||
cursor: pointer;
|
||||
background: #0f2839;
|
||||
border-top: 1px solid #1fc6ff;
|
||||
}
|
||||
|
||||
.date-unselected {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: flex-start;
|
||||
width: 38px;
|
||||
height: 28px;
|
||||
padding: 4px 12px;
|
||||
margin-left: 8px;
|
||||
font-family: "Helvetica Neue", Helvetica, "PingFang SC",
|
||||
"Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
color: #b4c0cc;
|
||||
cursor: pointer;
|
||||
background: #0f2839;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box_content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: calc(100% - 44px);
|
||||
background: rgb(5 18 48 / 20%);
|
||||
box-shadow: 0 2px 4px 0 rgb(31 198 255 / 20%) inset,
|
||||
2px 0 4px 0 rgb(31 198 255 / 20%) inset,
|
||||
0 -2px 4px 0 rgb(31 198 255 / 20%) inset,
|
||||
-2px 0 4px 0 rgb(31 198 255 / 20%) inset;
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.element1 {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.element2 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgb(31 199 255 / 0%) 0%,
|
||||
#1fc7ff 50.42%,
|
||||
rgb(31 199 255 / 0%) 94.9%
|
||||
);
|
||||
}
|
||||
|
||||
.element3 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
|
||||
.sub1 {
|
||||
width: 8px;
|
||||
height: 2px;
|
||||
margin-top: -2px;
|
||||
background: #1fc6ff;
|
||||
}
|
||||
|
||||
.sub2 {
|
||||
width: 8px;
|
||||
height: 2px;
|
||||
margin-top: -2px;
|
||||
margin-left: 2px;
|
||||
background: rgb(31 198 255 / 56%);
|
||||
}
|
||||
|
||||
.sub3 {
|
||||
width: 8px;
|
||||
height: 2px;
|
||||
margin-top: -2px;
|
||||
margin-left: 2px;
|
||||
background: rgb(31 198 255 / 24%);
|
||||
}
|
||||
}
|
||||
|
||||
.element4 {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
|
||||
.sub1 {
|
||||
width: 8px;
|
||||
height: 2px;
|
||||
background: rgb(31 198 255 / 56%);
|
||||
}
|
||||
|
||||
.sub2-container {
|
||||
display: flex;
|
||||
|
||||
.sub2 {
|
||||
width: 8px;
|
||||
height: 2px;
|
||||
margin-left: 2px;
|
||||
background: rgb(31 198 255 / 56%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,341 @@
|
||||
<script setup lang="ts">
|
||||
import { toRaw } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import dataBack from "@/assets/screen/data_back.svg?component";
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
});
|
||||
const router = useRouter();
|
||||
function goBack() {
|
||||
router.push("/project/list/index");
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
style="
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
"
|
||||
>
|
||||
<div class="back-btn" @click="goBack">
|
||||
<component :is="toRaw(dataBack)" />
|
||||
</div>
|
||||
<div class="title_text">{{ props.title }}</div>
|
||||
<div
|
||||
style="display: flex; justify-content: center; width: 100%; height: 100%"
|
||||
>
|
||||
<svg viewBox="0 0 1906 67" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M447 58L451.004 62H620.206L624.21 66H953"
|
||||
stroke="#1FC6FF"
|
||||
stroke-width="2"
|
||||
/>
|
||||
<path
|
||||
d="M1458.5 58L1454.5 62H1285.5L1281.5 66H953"
|
||||
stroke="#1FC6FF"
|
||||
stroke-width="2"
|
||||
/>
|
||||
<path
|
||||
d="M447 9L451.004 5H620.206L624.21 1H953"
|
||||
stroke="#1FC6FF"
|
||||
stroke-width="2"
|
||||
/>
|
||||
<path
|
||||
d="M1458.5 9L1454.5 5H1285.5L1281.5 1H953"
|
||||
stroke="#1FC6FF"
|
||||
stroke-width="2"
|
||||
/>
|
||||
<path opacity="0.7" d="M17 61.5H133" stroke="#136480" />
|
||||
<path d="M285 61.5H329.234H340.702H439" stroke="#136480" />
|
||||
<path d="M139 61.5H171" stroke="#1FC6FF" />
|
||||
<path d="M177 61.5H209" stroke="#1FC6FF" />
|
||||
<path opacity="0.7" d="M215 61.5H279" stroke="#136480" />
|
||||
<path d="M17 5H439" stroke="#136480" />
|
||||
<path d="M17 5H81" stroke="#1FC6FF" />
|
||||
<path d="M89 5L105 5" stroke="#1FC6FF" />
|
||||
<path d="M113 5L129 5" stroke="#1FC6FF" />
|
||||
<path d="M13 13H5L1 17.786V48.214L5 53H13" stroke="#1FC6FF" />
|
||||
<path d="M1889 61.5H1773" stroke="#136480" />
|
||||
<path
|
||||
d="M1621 61.5L1576.77 61.5L1565.3 61.5L1467 61.5"
|
||||
stroke="#136480"
|
||||
/>
|
||||
<path d="M1767 61.5H1735" stroke="#1FC6FF" />
|
||||
<path d="M1729 61.5H1697" stroke="#1FC6FF" />
|
||||
<path d="M1691 61.5H1627" stroke="#136480" />
|
||||
<path d="M1889 5L1467 4.99996" stroke="#13647F" />
|
||||
<path
|
||||
d="M1893 13H1901L1905 17.786V48.214L1901 53H1893"
|
||||
stroke="#1FC6FF"
|
||||
/>
|
||||
<path d="M1889 5H1825" stroke="#1FC6FF" />
|
||||
<path d="M1817 5L1801 5" stroke="#1FC6FF" />
|
||||
<path d="M1793 5L1777 5" stroke="#1FC6FF" />
|
||||
<mask
|
||||
id="mask0_44_884"
|
||||
style="mask-type: alpha"
|
||||
maskUnits="userSpaceOnUse"
|
||||
x="448"
|
||||
y="2"
|
||||
width="1070"
|
||||
height="63"
|
||||
>
|
||||
<path
|
||||
d="M624.611 2L620.603 6H451.5L448 9.5V57.5L451.5 61H620.649L624.646 65H1281.09L1285.1 61H1514.08L1518 57V10L1514 6H1285.09L1281.09 2H624.611Z"
|
||||
fill="url(#paint0_linear_44_884)"
|
||||
/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_44_884)">
|
||||
<path
|
||||
d="M623.611 2L619.603 6H450.5L447 9.5V57.5L450.5 61H619.649L623.646 65H1280.09L1284.1 61H1453.08L1457 57V10L1453 6H1284.09L1280.09 2H623.611Z"
|
||||
fill="url(#paint1_linear_44_884)"
|
||||
fill-opacity="0.63"
|
||||
/>
|
||||
</g>
|
||||
<path
|
||||
d="M689 25.3438L691.278 23L701 33L691.278 43L689 40.6562L696.443 33L689 25.3438Z"
|
||||
fill="#1FC6FF"
|
||||
/>
|
||||
<path
|
||||
d="M729 25.3438L731.278 23L741 33L731.278 43L729 40.6562L736.443 33L729 25.3438Z"
|
||||
fill="#1FC6FF"
|
||||
/>
|
||||
<path
|
||||
d="M709 25.3438L711.278 23L721 33L711.278 43L709 40.6562L716.443 33L709 25.3438Z"
|
||||
fill="#1FC6FF"
|
||||
fill-opacity="0.32"
|
||||
/>
|
||||
<path
|
||||
d="M749 25.3438L751.278 23L761 33L751.278 43L749 40.6562L756.443 33L749 25.3438Z"
|
||||
fill="#1FC6FF"
|
||||
fill-opacity="0.32"
|
||||
/>
|
||||
<path
|
||||
d="M1217 25.3438L1214.72 23L1205 33L1214.72 43L1217 40.6562L1209.56 33L1217 25.3438Z"
|
||||
fill="#1FC6FF"
|
||||
/>
|
||||
<path
|
||||
d="M1177 25.3438L1174.72 23L1165 33L1174.72 43L1177 40.6562L1169.56 33L1177 25.3438Z"
|
||||
fill="#1FC6FF"
|
||||
/>
|
||||
<path
|
||||
d="M1197 25.3438L1194.72 23L1185 33L1194.72 43L1197 40.6562L1189.56 33L1197 25.3438Z"
|
||||
fill="#1FC6FF"
|
||||
fill-opacity="0.32"
|
||||
/>
|
||||
<path
|
||||
d="M1157 25.3438L1154.72 23L1145 33L1154.72 43L1157 40.6562L1149.56 33L1157 25.3438Z"
|
||||
fill="#1FC6FF"
|
||||
fill-opacity="0.32"
|
||||
/>
|
||||
<path
|
||||
d="M489 31L491 33L489 35"
|
||||
stroke="#1FC6FF"
|
||||
stroke-opacity="0.56"
|
||||
stroke-width="1.20592"
|
||||
stroke-miterlimit="10"
|
||||
/>
|
||||
<path
|
||||
d="M481 43L479 45L477 43"
|
||||
stroke="#1FC6FF"
|
||||
stroke-opacity="0.56"
|
||||
stroke-width="1.20592"
|
||||
stroke-miterlimit="10"
|
||||
/>
|
||||
<path
|
||||
d="M469 35L467 33L469 31"
|
||||
stroke="#1FC6FF"
|
||||
stroke-opacity="0.56"
|
||||
stroke-width="1.20592"
|
||||
stroke-miterlimit="10"
|
||||
/>
|
||||
<path
|
||||
d="M477 23L479 21L481 23"
|
||||
stroke="#1FC6FF"
|
||||
stroke-opacity="0.56"
|
||||
stroke-width="1.20592"
|
||||
stroke-miterlimit="10"
|
||||
/>
|
||||
<path
|
||||
d="M480 32H478V34H480V32Z"
|
||||
stroke="#1FC6FF"
|
||||
stroke-opacity="0.56"
|
||||
stroke-width="0.604533"
|
||||
stroke-miterlimit="10"
|
||||
/>
|
||||
<path
|
||||
d="M483 35V37H481"
|
||||
stroke="#1FC6FF"
|
||||
stroke-opacity="0.56"
|
||||
stroke-width="1.20592"
|
||||
stroke-miterlimit="10"
|
||||
/>
|
||||
<path
|
||||
d="M477 37H475V35"
|
||||
stroke="#1FC6FF"
|
||||
stroke-opacity="0.56"
|
||||
stroke-width="1.20592"
|
||||
stroke-miterlimit="10"
|
||||
/>
|
||||
<path
|
||||
d="M475 31V29H477"
|
||||
stroke="#1FC6FF"
|
||||
stroke-opacity="0.56"
|
||||
stroke-width="1.20592"
|
||||
stroke-miterlimit="10"
|
||||
/>
|
||||
<path
|
||||
d="M481 29H483V31"
|
||||
stroke="#1FC6FF"
|
||||
stroke-opacity="0.56"
|
||||
stroke-width="1.20592"
|
||||
stroke-miterlimit="10"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M599.126 34H511V32H599.126C599.57 30.2748 601.136 29 603 29H611C613.209 29 615 30.7909 615 33C615 35.2091 613.209 37 611 37H603C601.136 37 599.57 35.7252 599.126 34Z"
|
||||
fill="#1FC6FF"
|
||||
fill-opacity="0.32"
|
||||
/>
|
||||
<path
|
||||
d="M1417 32L1415 34L1417 36"
|
||||
stroke="#1FC6FF"
|
||||
stroke-opacity="0.56"
|
||||
stroke-width="1.20592"
|
||||
stroke-miterlimit="10"
|
||||
/>
|
||||
<path
|
||||
d="M1425 44L1427 46L1429 44"
|
||||
stroke="#1FC6FF"
|
||||
stroke-opacity="0.56"
|
||||
stroke-width="1.20592"
|
||||
stroke-miterlimit="10"
|
||||
/>
|
||||
<path
|
||||
d="M1437 36L1439 34L1437 32"
|
||||
stroke="#1FC6FF"
|
||||
stroke-opacity="0.56"
|
||||
stroke-width="1.20592"
|
||||
stroke-miterlimit="10"
|
||||
/>
|
||||
<path
|
||||
d="M1429 24L1427 22L1425 24"
|
||||
stroke="#1FC6FF"
|
||||
stroke-opacity="0.56"
|
||||
stroke-width="1.20592"
|
||||
stroke-miterlimit="10"
|
||||
/>
|
||||
<path
|
||||
d="M1426 33H1428V35H1426V33Z"
|
||||
stroke="#1FC6FF"
|
||||
stroke-opacity="0.56"
|
||||
stroke-width="0.604533"
|
||||
stroke-miterlimit="10"
|
||||
/>
|
||||
<path
|
||||
d="M1423 36V38H1425"
|
||||
stroke="#1FC6FF"
|
||||
stroke-opacity="0.56"
|
||||
stroke-width="1.20592"
|
||||
stroke-miterlimit="10"
|
||||
/>
|
||||
<path
|
||||
d="M1429 38H1431V36"
|
||||
stroke="#1FC6FF"
|
||||
stroke-opacity="0.56"
|
||||
stroke-width="1.20592"
|
||||
stroke-miterlimit="10"
|
||||
/>
|
||||
<path
|
||||
d="M1431 32V30H1429"
|
||||
stroke="#1FC6FF"
|
||||
stroke-opacity="0.56"
|
||||
stroke-width="1.20592"
|
||||
stroke-miterlimit="10"
|
||||
/>
|
||||
<path
|
||||
d="M1425 30H1423V32"
|
||||
stroke="#1FC6FF"
|
||||
stroke-opacity="0.56"
|
||||
stroke-width="1.20592"
|
||||
stroke-miterlimit="10"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M1306.87 35H1395V33H1306.87C1306.43 31.2748 1304.86 30 1303 30H1295C1292.79 30 1291 31.7909 1291 34C1291 36.2091 1292.79 38 1295 38H1303C1304.86 38 1306.43 36.7252 1306.87 35Z"
|
||||
fill="#1FC6FF"
|
||||
fill-opacity="0.32"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_44_884"
|
||||
x1="388"
|
||||
y1="39.9982"
|
||||
x2="1518"
|
||||
y2="32.9984"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#1FC6FF" stop-opacity="0" />
|
||||
<stop offset="0.508424" stop-color="#1FC6FF" />
|
||||
<stop offset="1" stop-color="#1FC6FF" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint1_linear_44_884"
|
||||
x1="952"
|
||||
y1="2"
|
||||
x2="952"
|
||||
y2="65"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#009DFF" />
|
||||
<stop offset="1" stop-color="#0D3168" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint2_linear_44_884"
|
||||
x1="953"
|
||||
y1="9"
|
||||
x2="953"
|
||||
y2="57"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="white" />
|
||||
<stop offset="1" stop-color="#83CFFF" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.title_text {
|
||||
position: absolute;
|
||||
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
|
||||
"Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
||||
font-size: 40px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 48px; /* 120% */
|
||||
text-align: justify;
|
||||
letter-spacing: 4px;
|
||||
background: linear-gradient(180deg, #fff 0%, #83cfff 100%);
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 30px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,230 @@
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<div class="box_container">
|
||||
<div class="box_header_line" />
|
||||
<div class="box_header">
|
||||
<template
|
||||
v-for="(name, index) in [
|
||||
'云主机CPU平均使用率TOP5',
|
||||
'云主机内存使用率TOP5',
|
||||
'物理机CPU平均使用率TOP5',
|
||||
'物理机内存使用率TOP5'
|
||||
]"
|
||||
:key="index"
|
||||
>
|
||||
<div class="header_box flex justify-between">
|
||||
<div class="header_title">{{ name }}</div>
|
||||
<div class="header_addon">
|
||||
<div class="line">
|
||||
<img src="src/assets/screen/header_line.png" alt="" />
|
||||
</div>
|
||||
<div class="line">
|
||||
<img src="src/assets/screen/header_line.png" alt="" />
|
||||
</div>
|
||||
<div class="line">
|
||||
<img src="src/assets/screen/header_line.png" alt="" />
|
||||
</div>
|
||||
<div class="line">
|
||||
<img src="src/assets/screen/header_line.png" alt="" />
|
||||
</div>
|
||||
<div class="line">
|
||||
<img src="src/assets/screen/header_line.png" alt="" />
|
||||
</div>
|
||||
<div class="line">
|
||||
<img src="src/assets/screen/header_line.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="box_content">
|
||||
<div class="content">
|
||||
<slot name="content" />
|
||||
</div>
|
||||
<div class="element1">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="3"
|
||||
viewBox="0 0 20 3"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M3.52755 0H19.5541L16.0265 3H0L3.52755 0Z"
|
||||
fill="#1FC6FF"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="element2" />
|
||||
<div class="element3">
|
||||
<div class="sub1" />
|
||||
<div class="sub2" />
|
||||
<div class="sub3" />
|
||||
</div>
|
||||
<div class="element4">
|
||||
<div class="sub1" />
|
||||
<div class="sub2-container">
|
||||
<div class="sub2" />
|
||||
<div class="sub2" />
|
||||
<div class="sub2" />
|
||||
</div>
|
||||
<div class="sub2-container">
|
||||
<div class="sub2" />
|
||||
<div class="sub2" />
|
||||
<div class="sub2" />
|
||||
</div>
|
||||
<div class="sub1" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.box_container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.box_header_line {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #136480;
|
||||
}
|
||||
|
||||
.box_header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 44px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgb(31 180 255 / 12%) 0%,
|
||||
rgb(31 180 255 / 0%) 100%
|
||||
);
|
||||
|
||||
.header_box {
|
||||
/* width: 460px; */
|
||||
flex: 1;
|
||||
|
||||
&:nth-of-type(2) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.header_title {
|
||||
margin-left: 20px;
|
||||
font-family: "Helvetica Neue", Helvetica, "PingFang SC",
|
||||
"Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.header_addon {
|
||||
display: flex;
|
||||
|
||||
.line {
|
||||
width: 28px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box_content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: calc(100% - 44px);
|
||||
padding: 8px;
|
||||
background: rgb(5 18 48 / 20%);
|
||||
box-shadow: 0 2px 4px 0 rgb(31 198 255 / 20%) inset,
|
||||
2px 0 4px 0 rgb(31 198 255 / 20%) inset,
|
||||
0 -2px 4px 0 rgb(31 198 255 / 20%) inset,
|
||||
-2px 0 4px 0 rgb(31 198 255 / 20%) inset;
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.element1 {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.element2 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgb(31 199 255 / 0%) 0%,
|
||||
#1fc7ff 50.42%,
|
||||
rgb(31 199 255 / 0%) 94.9%
|
||||
);
|
||||
}
|
||||
|
||||
.element3 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
|
||||
.sub1 {
|
||||
width: 8px;
|
||||
height: 2px;
|
||||
margin-top: -2px;
|
||||
background: #1fc6ff;
|
||||
}
|
||||
|
||||
.sub2 {
|
||||
width: 8px;
|
||||
height: 2px;
|
||||
margin-top: -2px;
|
||||
margin-left: 2px;
|
||||
background: rgb(31 198 255 / 56%);
|
||||
}
|
||||
|
||||
.sub3 {
|
||||
width: 8px;
|
||||
height: 2px;
|
||||
margin-top: -2px;
|
||||
margin-left: 2px;
|
||||
background: rgb(31 198 255 / 24%);
|
||||
}
|
||||
}
|
||||
|
||||
.element4 {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
|
||||
.sub1 {
|
||||
width: 8px;
|
||||
height: 2px;
|
||||
background: rgb(31 198 255 / 56%);
|
||||
}
|
||||
|
||||
.sub2-container {
|
||||
display: flex;
|
||||
|
||||
.sub2 {
|
||||
width: 8px;
|
||||
height: 2px;
|
||||
margin-left: 2px;
|
||||
background: rgb(31 198 255 / 56%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div ref="elChart" style="width: 100%; height: 100%" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, onUpdated, onUnmounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
|
||||
const props = defineProps({
|
||||
option: {
|
||||
type: Object
|
||||
},
|
||||
data: {
|
||||
type: Object
|
||||
}
|
||||
});
|
||||
const elChart = ref();
|
||||
let chart: any = null;
|
||||
|
||||
function clear() {
|
||||
chart && chart.dispose();
|
||||
}
|
||||
|
||||
function draw() {
|
||||
clear();
|
||||
chart = echarts.init(elChart.value);
|
||||
chart.setOption(props.option);
|
||||
}
|
||||
|
||||
onMounted(draw);
|
||||
onUpdated(draw);
|
||||
onUnmounted(clear);
|
||||
</script>
|
||||
@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<div style="width: 100%; height: 180px">
|
||||
<div class="chart-style" style="width: 100%; height: 100%">
|
||||
<vue-chart :option="chartOption" style="width: 100%; height: 100%" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import VueChart from "../../components/VueChart.vue";
|
||||
import * as echarts from "echarts";
|
||||
|
||||
import { computed } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
time_type: {
|
||||
type: String,
|
||||
default: "month"
|
||||
},
|
||||
month_data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
week_data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
day_data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
});
|
||||
|
||||
const name_list = computed(() => {
|
||||
if (props.time_type === "month") {
|
||||
return props.month_data.map((item: any) => {
|
||||
return item.name;
|
||||
});
|
||||
} else if (props.time_type === "week") {
|
||||
return props.week_data.map((item: any) => {
|
||||
return item.name;
|
||||
});
|
||||
} else {
|
||||
return props.day_data.map((item: any) => {
|
||||
return item.name;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const value_list = computed(() => {
|
||||
if (props.time_type === "month") {
|
||||
return props.month_data.map((item: any) => {
|
||||
return item.value;
|
||||
});
|
||||
} else if (props.time_type === "week") {
|
||||
return props.week_data.map((item: any) => {
|
||||
return item.value;
|
||||
});
|
||||
} else {
|
||||
return props.day_data.map((item: any) => {
|
||||
return item.value;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const chartOption = computed(() => {
|
||||
return {
|
||||
grid: {
|
||||
top: "30px",
|
||||
left: "50px",
|
||||
bottom: "30px",
|
||||
right: "10px"
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: name_list.value,
|
||||
axisLabel: {
|
||||
color: "rgba(255, 255, 255, 0.40)"
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,0.2)"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(255, 255, 255, 0.40)"
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: value_list.value,
|
||||
type: "bar",
|
||||
barWidth: props.time_type === "day" ? "10px" : "20px",
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(0, 242, 255, 1)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(0, 164, 249, 1)"
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<div style="width: 100%; height: 210px">
|
||||
<div class="chart-style" style="width: 100%; height: 100%">
|
||||
<vue-chart :option="chartOption" style="width: 100%; height: 100%" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import VueChart from "../../components/VueChart.vue";
|
||||
// import * as echarts from "echarts";
|
||||
|
||||
import { computed } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
month_data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
day_data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
});
|
||||
|
||||
const name_list = computed(() => {
|
||||
return props.data.map((item: any) => {
|
||||
return item.name;
|
||||
});
|
||||
});
|
||||
|
||||
const value_list = computed(() => {
|
||||
return props.data.map((item: any) => {
|
||||
return item.value;
|
||||
});
|
||||
});
|
||||
|
||||
const value_100_minus_list = computed(() => {
|
||||
return props.data.map((item: any) => {
|
||||
return parseInt(100 - parseInt(item.value));
|
||||
});
|
||||
});
|
||||
|
||||
const chartOption = computed(() => {
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: "axis"
|
||||
},
|
||||
legend: {
|
||||
bottom: 0,
|
||||
data: ["总量", "占用"],
|
||||
textStyle: {
|
||||
color: "rgba(255, 255, 255, 0.40)"
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: "30px",
|
||||
left: "50px",
|
||||
bottom: "50px",
|
||||
right: "10px"
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: name_list.value
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,0.4)"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
interval: "auto",
|
||||
formatter: "{value} %"
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: value_list.value,
|
||||
type: "bar",
|
||||
stack: "use",
|
||||
color: "#5BF6EF",
|
||||
name: "总量",
|
||||
barWidth: "24px"
|
||||
},
|
||||
{
|
||||
data: value_100_minus_list.value,
|
||||
type: "bar",
|
||||
stack: "use",
|
||||
color: "#E5BF37",
|
||||
name: "占用",
|
||||
barWidth: "24px"
|
||||
}
|
||||
]
|
||||
};
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<div style="width: 100%; height: 180px">
|
||||
<div class="chart-style" style="width: 100%; height: 100%">
|
||||
<vue-chart :option="chartOption" style="width: 100%; height: 100%" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import VueChart from "../../components/VueChart.vue";
|
||||
import * as echarts from "echarts";
|
||||
|
||||
import { computed } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
month_data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
day_data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
});
|
||||
const name_list = computed(() => {
|
||||
return props.data.map((item: any) => {
|
||||
return item.name;
|
||||
});
|
||||
});
|
||||
|
||||
const value_list = computed(() => {
|
||||
return props.data.map((item: any) => {
|
||||
return item.value;
|
||||
});
|
||||
});
|
||||
|
||||
const chartOption = computed(() => {
|
||||
return {
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: name_list.value,
|
||||
axisLabel: {
|
||||
color: "rgba(255, 255, 255, 0.80)"
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
position: "left",
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(255, 255, 255, 0.2)"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
formatter: "{value}", //右侧Y轴文字显示
|
||||
color: "rgba(255, 255, 255, 0.80)"
|
||||
}
|
||||
}
|
||||
],
|
||||
grid: {
|
||||
top: "30px",
|
||||
left: "40px",
|
||||
bottom: "20px",
|
||||
right: "10px"
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: value_list.value,
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbol: "circle", //标记的图形为实心圆
|
||||
symbolSize: 15, //标记的大小
|
||||
itemStyle: {
|
||||
//折线拐点标志的样式
|
||||
color: "#1FC6FF"
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(197, 246, 244, 1)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(91, 246, 239, 0)"
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<div style="width: 100%; height: 180px">
|
||||
<div class="chart-style" style="width: 100%; height: 100%">
|
||||
<vue-chart :option="chartOption" style="width: 100%; height: 100%" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import VueChart from "../../components/VueChart.vue";
|
||||
import * as echarts from "echarts";
|
||||
|
||||
import { computed } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
month_data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
day_data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
});
|
||||
|
||||
const name_list = computed(() => {
|
||||
return props.data.map((item: any) => {
|
||||
return item.name;
|
||||
});
|
||||
});
|
||||
|
||||
const value_list = computed(() => {
|
||||
return props.data.map((item: any) => {
|
||||
return item.value;
|
||||
});
|
||||
});
|
||||
|
||||
const chartOption = computed(() => {
|
||||
return {
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: name_list.value,
|
||||
axisLabel: {
|
||||
color: "rgba(255, 255, 255, 0.60)"
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
position: "left",
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(255, 255, 255, 0.2)"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
formatter: "{value}", //右侧Y轴文字显示
|
||||
color: "rgba(255, 255, 255, 0.40)"
|
||||
}
|
||||
}
|
||||
],
|
||||
grid: {
|
||||
top: "30px",
|
||||
left: "40px",
|
||||
bottom: "20px",
|
||||
right: "10px"
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: value_list.value,
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbol: "circle", //标记的图形为实心圆
|
||||
symbolSize: 15, //标记的大小
|
||||
itemStyle: {
|
||||
//折线拐点标志的样式
|
||||
color: "#1FC6FF"
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(0, 202, 213, 1)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(0, 164, 249, 0)"
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div style="width: 100%; height: 180px">
|
||||
<div class="header_title">
|
||||
<div class="title_text">最新入驻</div>
|
||||
</div>
|
||||
<div class="list_container scroll-container">
|
||||
<vue3-seamless-scroll :list="props.data" class="scroll" :step="0.5">
|
||||
<div class="list_title" v-for="(d, index) in props.data" :key="index">
|
||||
{{ d.name }}
|
||||
</div>
|
||||
</vue3-seamless-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
|
||||
|
||||
interface DataItem {
|
||||
id: number;
|
||||
name: string;
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
data: DataItem[];
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.header_title {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
width: 428px;
|
||||
height: 42px;
|
||||
padding: 10px 20px;
|
||||
background: #03234d;
|
||||
|
||||
.title_text {
|
||||
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
|
||||
"Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
color: rgb(255 255 255 / 80%);
|
||||
}
|
||||
}
|
||||
|
||||
.list_container {
|
||||
height: calc(100% - 42px);
|
||||
padding: 10px 20px;
|
||||
overflow-y: auto;
|
||||
|
||||
.list_title {
|
||||
margin-bottom: 22px;
|
||||
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
|
||||
"Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
color: rgb(255 255 255 / 80%);
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-container::-webkit-scrollbar {
|
||||
display: none; /* Chrome, Safari, and Opera */
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<div style="width: 100%; height: 180px">
|
||||
<div class="chart-style" style="width: 100%; height: 100%">
|
||||
<vue-chart :option="chartOption" style="width: 100%; height: 100%" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import VueChart from "../../components/VueChart.vue";
|
||||
// import * as echarts from "echarts";
|
||||
|
||||
import { computed } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
month_data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
day_data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
});
|
||||
|
||||
const total_data = computed(() => {
|
||||
if (!props.data || props.data.length === 0) {
|
||||
return 0;
|
||||
} else {
|
||||
return props.data.reduce(function (sum, item: any) {
|
||||
return sum + item.value;
|
||||
}, 0);
|
||||
}
|
||||
});
|
||||
// function customLabelFormatter(params) {
|
||||
// const text = params.value.toString();
|
||||
// const coloredText = text.replace(
|
||||
// /\d+/g,
|
||||
// '<span style="color: blue;">$&</span>'
|
||||
// ); // 正则表达式匹配数字并设置为蓝色
|
||||
// return coloredText;
|
||||
// }
|
||||
|
||||
const chartOption = computed(() => {
|
||||
return {
|
||||
color: ["#4DD1FF", "#056DFF"],
|
||||
title: {
|
||||
text: total_data.value,
|
||||
subtext: "总数",
|
||||
left: "center",
|
||||
top: "60px",
|
||||
textStyle: {
|
||||
fontSize: 28,
|
||||
fontFamily: "D-DIN",
|
||||
color: "#FFAB00"
|
||||
},
|
||||
subtextStyle: {
|
||||
color: "rgba(255, 255, 255, 0.80)",
|
||||
fontSize: 16,
|
||||
fontFamily: "PingFang",
|
||||
top: "center"
|
||||
},
|
||||
itemGap: 4 //主副标题间距
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "Access From",
|
||||
type: "pie",
|
||||
radius: ["45%", "60%"],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
color: "rgba(255, 255, 255, 0.80)",
|
||||
formatter: function (params) {
|
||||
return params.name + "{hr|" + params.value + "}";
|
||||
},
|
||||
rich: {
|
||||
hr: {
|
||||
align: "center",
|
||||
color: "inherit",
|
||||
fontSize: 14
|
||||
}
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: true
|
||||
},
|
||||
data: props.data
|
||||
},
|
||||
{
|
||||
// name: "白色圈刻度",
|
||||
type: "gauge",
|
||||
radius: "100%",
|
||||
startAngle: 225, //刻度起始
|
||||
endAngle: -134.8, //刻度结束
|
||||
z: 4,
|
||||
axisTick: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: "rgba(1,244,255, 0.9)"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
length: 4, //刻度节点线长度
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: "rgba(1,244,255, 0.9)"
|
||||
} //刻度节点线
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(255,255,255,0)",
|
||||
fontSize: 12
|
||||
}, //刻度节点文字颜色
|
||||
pointer: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
opacity: 0
|
||||
}
|
||||
},
|
||||
detail: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 0,
|
||||
name: ""
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
});
|
||||
</script>
|
||||
@ -1,11 +1,270 @@
|
||||
<script setup lang="ts">
|
||||
import Header from "@/views/screen/components/Header.vue";
|
||||
import BoxGroup from "@/views/screen/components/BoxGroup.vue";
|
||||
import UsedStatus from "@/views/screen/layouts/UsedStatus.vue";
|
||||
import { reactive } from "vue";
|
||||
import LineChart1 from "@/views/screen/components/charts/LineChart1.vue";
|
||||
import LineChart2 from "@/views/screen/components/charts/LineChart2.vue";
|
||||
import Pie1 from "@/views/screen/components/charts/Pie1.vue";
|
||||
import RadarChart1 from "@/views/screen/components/charts/RadarChart1.vue";
|
||||
import NewCompany from "@/views/screen/components/charts/NewCompany.vue";
|
||||
import BarChart1 from "@/views/screen/components/charts/BarChart1.vue";
|
||||
import BarChart2 from "@/views/screen/components/charts/BarChart2.vue";
|
||||
import LongBoxGroup from "@/views/screen/components/LongBoxGroup.vue";
|
||||
import LineChart3 from "@/views/screen/components/charts/LineChart3.vue";
|
||||
import Pie3D from "@/views/screen/components/charts/Pie3D.vue";
|
||||
import {
|
||||
card1_data,
|
||||
card2_data,
|
||||
card3_data,
|
||||
card4_data,
|
||||
card5_data,
|
||||
card6_data,
|
||||
card7_data,
|
||||
card8_data,
|
||||
card9_data,
|
||||
card10_data
|
||||
} from "./mock";
|
||||
defineOptions({
|
||||
name: "Sereen"
|
||||
name: "Screen"
|
||||
});
|
||||
|
||||
const state = reactive({
|
||||
data: {
|
||||
card1: card1_data,
|
||||
card2: card2_data,
|
||||
card3: card3_data,
|
||||
card4: card4_data,
|
||||
card5: card5_data,
|
||||
card6: card6_data,
|
||||
card7: card7_data,
|
||||
card8: card8_data,
|
||||
card9: card9_data,
|
||||
card10: card10_data
|
||||
}
|
||||
});
|
||||
|
||||
const randomIntFn = (min: number, max: number) => {
|
||||
return Math.floor(Math.random() * (max - min + 1) + min);
|
||||
};
|
||||
|
||||
const randomFloatFn = (min: number, max: number) => {
|
||||
return (Math.random() * (max - min + 1) + min).toFixed(2);
|
||||
};
|
||||
|
||||
setInterval(() => {
|
||||
//card1
|
||||
setTimeout(() => {
|
||||
state.data.card1.data[0].value = randomIntFn(0, 1000);
|
||||
state.data.card1.data[1].value = randomIntFn(0, 1000);
|
||||
}, 100);
|
||||
//card2
|
||||
setTimeout(() => {
|
||||
state.data.card2.data[0].value = randomIntFn(0, 1000);
|
||||
state.data.card2.data[1].value = randomIntFn(0, 1000);
|
||||
state.data.card2.data[2].value = randomIntFn(0, 1000);
|
||||
state.data.card2.data[3].value = randomIntFn(0, 1000);
|
||||
state.data.card2.data[4].value = randomIntFn(0, 1000);
|
||||
state.data.card2.data[5].value = randomIntFn(0, 1000);
|
||||
state.data.card2.data[6].value = randomIntFn(0, 1000);
|
||||
}, 200);
|
||||
|
||||
//card3
|
||||
setTimeout(() => {
|
||||
state.data.card3.data[0].value = randomIntFn(0, 500);
|
||||
state.data.card3.data[1].value = randomIntFn(0, 500);
|
||||
state.data.card3.data[2].value = randomIntFn(0, 500);
|
||||
state.data.card3.data[3].value = randomIntFn(0, 500);
|
||||
state.data.card3.data[4].value = randomIntFn(0, 500);
|
||||
}, 300);
|
||||
|
||||
//card4
|
||||
|
||||
//card5
|
||||
setTimeout(() => {
|
||||
state.data.card5.data.month_data[0].value = randomIntFn(0, 1000);
|
||||
state.data.card5.data.month_data[1].value = randomIntFn(0, 1000);
|
||||
state.data.card5.data.month_data[2].value = randomIntFn(0, 1000);
|
||||
state.data.card5.data.month_data[3].value = randomIntFn(0, 1000);
|
||||
state.data.card5.data.month_data[4].value = randomIntFn(0, 1000);
|
||||
state.data.card5.data.month_data[5].value = randomIntFn(0, 1000);
|
||||
state.data.card5.data.month_data[6].value = randomIntFn(0, 1000);
|
||||
state.data.card5.data.month_data[7].value = randomIntFn(0, 1000);
|
||||
state.data.card5.data.month_data[8].value = randomIntFn(0, 1000);
|
||||
state.data.card5.data.month_data[9].value = randomIntFn(0, 1000);
|
||||
state.data.card5.data.month_data[10].value = randomIntFn(0, 1000);
|
||||
state.data.card5.data.month_data[11].value = randomIntFn(0, 1000);
|
||||
}, 400);
|
||||
|
||||
//card6
|
||||
setTimeout(() => {
|
||||
state.data.card6.data[0].value = randomIntFn(0, 500);
|
||||
state.data.card6.data[1].value = randomIntFn(0, 500);
|
||||
state.data.card6.data[2].value = randomIntFn(0, 500);
|
||||
state.data.card6.data[3].value = randomIntFn(0, 500);
|
||||
state.data.card6.data[4].value = randomIntFn(0, 500);
|
||||
}, 500);
|
||||
|
||||
//card7
|
||||
setTimeout(() => {
|
||||
state.data.card7.data[0].value = randomIntFn(0, 500);
|
||||
state.data.card7.data[1].value = randomIntFn(0, 500);
|
||||
}, 600);
|
||||
|
||||
//card8
|
||||
setTimeout(() => {
|
||||
state.data.card8.data.cpu_used = randomFloatFn(0, 100);
|
||||
state.data.card8.data.memory_used = randomFloatFn(0, 100);
|
||||
state.data.card8.data.disk_used = randomFloatFn(0, 100);
|
||||
state.data.card8.data.image_server_used = randomFloatFn(0, 100);
|
||||
}, 700);
|
||||
|
||||
//card9
|
||||
setTimeout(() => {
|
||||
state.data.card9.data[0].value = randomIntFn(0, 100);
|
||||
state.data.card9.data[1].value = randomIntFn(0, 100);
|
||||
state.data.card9.data[2].value = randomIntFn(0, 100);
|
||||
state.data.card9.data[3].value = randomIntFn(0, 100);
|
||||
state.data.card9.data[4].value = randomIntFn(0, 100);
|
||||
state.data.card9.data[5].value = randomIntFn(0, 100);
|
||||
state.data.card9.data[6].value = randomIntFn(0, 100);
|
||||
state.data.card9.data[7].value = randomIntFn(0, 100);
|
||||
state.data.card9.data[8].value = randomIntFn(0, 100);
|
||||
state.data.card9.data[9].value = randomIntFn(0, 100);
|
||||
state.data.card9.data[10].value = randomIntFn(0, 100);
|
||||
state.data.card9.data[11].value = randomIntFn(0, 100);
|
||||
}, 800);
|
||||
|
||||
//card10
|
||||
setTimeout(() => {
|
||||
state.data.card10.cloud_cpu_used_top5[0].value = randomFloatFn(0, 100);
|
||||
state.data.card10.cloud_cpu_used_top5[1].value = randomFloatFn(0, 100);
|
||||
state.data.card10.cloud_cpu_used_top5[2].value = randomFloatFn(0, 100);
|
||||
state.data.card10.cloud_cpu_used_top5[3].value = randomFloatFn(0, 100);
|
||||
state.data.card10.cloud_cpu_used_top5[4].value = randomFloatFn(0, 100);
|
||||
|
||||
state.data.card10.cloud_memory_used_top5[0].value = randomFloatFn(0, 100);
|
||||
state.data.card10.cloud_memory_used_top5[1].value = randomFloatFn(0, 100);
|
||||
state.data.card10.cloud_memory_used_top5[2].value = randomFloatFn(0, 100);
|
||||
state.data.card10.cloud_memory_used_top5[3].value = randomFloatFn(0, 100);
|
||||
state.data.card10.cloud_memory_used_top5[4].value = randomFloatFn(0, 100);
|
||||
|
||||
state.data.card10.local_cpu_used_top5[0].value = randomFloatFn(0, 100);
|
||||
state.data.card10.local_cpu_used_top5[1].value = randomFloatFn(0, 100);
|
||||
state.data.card10.local_cpu_used_top5[2].value = randomFloatFn(0, 100);
|
||||
state.data.card10.local_cpu_used_top5[3].value = randomFloatFn(0, 100);
|
||||
state.data.card10.local_cpu_used_top5[4].value = randomFloatFn(0, 100);
|
||||
|
||||
state.data.card10.local_memory_used_top5[0].value = randomFloatFn(0, 100);
|
||||
state.data.card10.local_memory_used_top5[1].value = randomFloatFn(0, 100);
|
||||
state.data.card10.local_memory_used_top5[2].value = randomFloatFn(0, 100);
|
||||
state.data.card10.local_memory_used_top5[3].value = randomFloatFn(0, 100);
|
||||
state.data.card10.local_memory_used_top5[4].value = randomFloatFn(0, 100);
|
||||
}, 900);
|
||||
}, 10000);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="Sereen">
|
||||
<h1>Sereen</h1>
|
||||
<div class="data-dashboard">
|
||||
<div class="data-dashboard-bg">
|
||||
<img
|
||||
style="width: 1920px; height: 1080px; filter: brightness(30%)"
|
||||
src="/src/assets/screen/bg.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<section class="header"><Header title="算力云数据平台" /></section>
|
||||
<section class="card1">
|
||||
<BoxGroup title="算法总数">
|
||||
<template v-slot:content>
|
||||
<Pie1 :data="state.data.card1.data" />
|
||||
</template>
|
||||
</BoxGroup>
|
||||
</section>
|
||||
<section class="card2">
|
||||
<BoxGroup title="算法分布">
|
||||
<template v-slot:content>
|
||||
<RadarChart1 :data="state.data.card2.data" />
|
||||
</template>
|
||||
</BoxGroup>
|
||||
</section>
|
||||
<section class="card3">
|
||||
<BoxGroup title="用户使用时长">
|
||||
<template v-slot:content>
|
||||
<LineChart1 :data="state.data.card3.data" />
|
||||
</template>
|
||||
</BoxGroup>
|
||||
</section>
|
||||
<section class="card4">
|
||||
<BoxGroup title="已入驻企业(859)">
|
||||
<template v-slot:content>
|
||||
<NewCompany :data="state.data.card4.data" />
|
||||
</template>
|
||||
</BoxGroup>
|
||||
</section>
|
||||
<section class="card5">
|
||||
<BoxGroup title="5G数据用量(GB)" :is_date_select="true">
|
||||
<template v-slot:content="{ time_type }">
|
||||
<BarChart1
|
||||
:month_data="state.data.card5.data.month_data"
|
||||
:week_data="state.data.card5.data.week_data"
|
||||
:day_data="state.data.card5.data.day_data"
|
||||
:time_type="time_type"
|
||||
/>
|
||||
</template>
|
||||
</BoxGroup>
|
||||
</section>
|
||||
<section class="card6">
|
||||
<BoxGroup title="带宽使用(Mbps)">
|
||||
<template v-slot:content>
|
||||
<LineChart2 :data="state.data.card6.data" />
|
||||
</template>
|
||||
</BoxGroup>
|
||||
</section>
|
||||
<section class="card7">
|
||||
<Pie3D :data="state.data.card7.data" />
|
||||
</section>
|
||||
<section class="card8">
|
||||
<BoxGroup title="用量统计">
|
||||
<template v-slot:content>
|
||||
<UsedStatus :data="state.data.card8.data" />
|
||||
</template>
|
||||
</BoxGroup>
|
||||
</section>
|
||||
<section class="card9">
|
||||
<BoxGroup title="节点GPU占用">
|
||||
<template v-slot:content>
|
||||
<BarChart2 :data="state.data.card9.data" />
|
||||
</template>
|
||||
</BoxGroup>
|
||||
</section>
|
||||
<section class="card10">
|
||||
<LongBoxGroup>
|
||||
<template v-slot:content>
|
||||
<div class="bottom_box">
|
||||
<LineChart3 :data="state.data.card10.cloud_cpu_used_top5" />
|
||||
</div>
|
||||
<div class="bottom_box">
|
||||
<LineChart3 :data="state.data.card10.cloud_memory_used_top5" />
|
||||
</div>
|
||||
<div class="bottom_box">
|
||||
<LineChart3 :data="state.data.card10.local_cpu_used_top5" />
|
||||
</div>
|
||||
<div class="bottom_box">
|
||||
<LineChart3 :data="state.data.card10.local_memory_used_top5" />
|
||||
</div>
|
||||
</template>
|
||||
</LongBoxGroup>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 在这里引入外部的 style.css 文件 */
|
||||
@import url("./style.css");
|
||||
|
||||
.bottom_box {
|
||||
width: 460px;
|
||||
height: 180px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,117 @@
|
||||
<script setup lang="ts">
|
||||
// import { computed } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
cpu_used: "",
|
||||
memory_used: "",
|
||||
disk_used: "",
|
||||
image_server_used: ""
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
const used_text_class = data => {
|
||||
if (data > 90) {
|
||||
return "used_text_warning";
|
||||
} else {
|
||||
return "used_text_normal";
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="used_box">
|
||||
<div class="box_container">
|
||||
<div class="left"><img src="src/assets/screen/cpu.png" alt="" /></div>
|
||||
<div class="right">
|
||||
<div class="title_text">cpu</div>
|
||||
<div :class="used_text_class(props.data.cpu_used)">
|
||||
{{ props.data.cpu_used }}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box_container">
|
||||
<div class="left"><img src="src/assets/screen/memory.png" alt="" /></div>
|
||||
<div class="right">
|
||||
<div class="title_text">内存</div>
|
||||
<div :class="used_text_class(props.data.memory_used)">
|
||||
{{ props.data.memory_used }}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box_container">
|
||||
<div class="left"><img src="src/assets/screen/disk.png" alt="" /></div>
|
||||
<div class="right">
|
||||
<div class="title_text">主存储</div>
|
||||
<div :class="used_text_class(props.data.disk_used)">
|
||||
{{ props.data.disk_used }}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box_container">
|
||||
<div class="left">
|
||||
<img src="src/assets/screen/image_server.png" alt="" />
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="title_text">镜像服务器</div>
|
||||
<div :class="used_text_class(props.data.image_server_used)">
|
||||
{{ props.data.image_server_used }}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.used_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
|
||||
.box_container {
|
||||
display: flex;
|
||||
|
||||
.left {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-left: 12px;
|
||||
|
||||
.title_text {
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
color: #b4c0cc;
|
||||
}
|
||||
|
||||
.used_text_normal {
|
||||
font-family: "Helvetica Neue", Helvetica, "PingFang SC",
|
||||
"Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
||||
font-size: 26px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 30px;
|
||||
color: #2fcf94;
|
||||
}
|
||||
|
||||
.used_text_warning {
|
||||
font-family: "Helvetica Neue", Helvetica, "PingFang SC",
|
||||
"Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
||||
font-size: 26px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 30px;
|
||||
color: #c61e1e;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,208 @@
|
||||
export const card1_data = {
|
||||
data: [
|
||||
{ value: 762, name: "深度学习算法" },
|
||||
{ value: 359, name: "经典算法" }
|
||||
]
|
||||
};
|
||||
|
||||
export const card2_data = {
|
||||
data: [
|
||||
{ name: "安全类", value: 800 },
|
||||
{ name: "通用类", value: 900 },
|
||||
{ name: "SMT电子", value: 200 },
|
||||
{ name: "液晶屏", value: 750 },
|
||||
{ name: "金属表面", value: 900 },
|
||||
{ name: "管材表面", value: 580 },
|
||||
{ name: "锂电池检测", value: 300 },
|
||||
{ name: "陶瓷类", value: 100 }
|
||||
]
|
||||
};
|
||||
|
||||
export const card3_data = {
|
||||
data: [
|
||||
{ name: "08:20", value: 150 },
|
||||
{ name: "10:00", value: 60 },
|
||||
{ name: "13:00", value: 120 },
|
||||
{ name: "15:00", value: 90 },
|
||||
{ name: "17:00", value: 210 }
|
||||
]
|
||||
};
|
||||
|
||||
export const card4_data = {
|
||||
data: [
|
||||
{ id: 1, name: "xxxxxxxxxxx科技有限公司" },
|
||||
{ id: 2, name: "xxxxxxxxxxx科技有限公司" },
|
||||
{ id: 3, name: "xxxxxxxxxxx科技有限公司" }
|
||||
]
|
||||
};
|
||||
|
||||
export const card5_data = {
|
||||
data: {
|
||||
month_data: [
|
||||
{ name: "1", value: 150 },
|
||||
{ name: "2", value: 60 },
|
||||
{ name: "3", value: 120 },
|
||||
{ name: "4", value: 90 },
|
||||
{ name: "5", value: 210 },
|
||||
{ name: "6", value: 150 },
|
||||
{ name: "7", value: 60 },
|
||||
{ name: "8", value: 120 },
|
||||
{ name: "9", value: 90 },
|
||||
{ name: "10", value: 210 },
|
||||
{ name: "11", value: 150 },
|
||||
{ name: "12", value: 60 }
|
||||
],
|
||||
week_data: [
|
||||
{ name: "一", value: 150 },
|
||||
{ name: "二", value: 60 },
|
||||
{ name: "三", value: 120 },
|
||||
{ name: "四", value: 90 },
|
||||
{ name: "五", value: 210 },
|
||||
{ name: "六", value: 150 },
|
||||
{ name: "日", value: 60 }
|
||||
],
|
||||
day_data: [
|
||||
{ name: "1", value: 150 },
|
||||
{ name: "2", value: 60 },
|
||||
{ name: "3", value: 120 },
|
||||
{ name: "4", value: 90 },
|
||||
{ name: "5", value: 210 },
|
||||
{ name: "6", value: 150 },
|
||||
{ name: "7", value: 60 },
|
||||
{ name: "8", value: 120 },
|
||||
{ name: "9", value: 90 },
|
||||
{ name: "10", value: 210 },
|
||||
{ name: "11", value: 150 },
|
||||
{ name: "12", value: 60 },
|
||||
{ name: "13", value: 150 },
|
||||
{ name: "14", value: 60 },
|
||||
{ name: "15", value: 120 },
|
||||
{ name: "16", value: 90 },
|
||||
{ name: "17", value: 210 },
|
||||
{ name: "18", value: 150 },
|
||||
{ name: "19", value: 60 },
|
||||
{ name: "20", value: 120 },
|
||||
{ name: "21", value: 150 },
|
||||
{ name: "22", value: 60 },
|
||||
{ name: "23", value: 120 },
|
||||
{ name: "24", value: 90 },
|
||||
{ name: "25", value: 210 },
|
||||
{ name: "26", value: 150 },
|
||||
{ name: "27", value: 60 },
|
||||
{ name: "28", value: 120 },
|
||||
{ name: "29", value: 90 },
|
||||
{ name: "30", value: 210 },
|
||||
{ name: "31", value: 150 }
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export const card6_data = {
|
||||
data: [
|
||||
{ name: "08:20", value: 150 },
|
||||
{ name: "10:00", value: 60 },
|
||||
{ name: "13:00", value: 120 },
|
||||
{ name: "15:00", value: 90 },
|
||||
{ name: "17:00", value: 210 }
|
||||
]
|
||||
};
|
||||
|
||||
export const card7_data = {
|
||||
data: [
|
||||
{ name: "已占用", value: 900 },
|
||||
{ name: "未占用", value: 2000 }
|
||||
]
|
||||
};
|
||||
|
||||
export const card8_data = {
|
||||
data: {
|
||||
cpu_used: "58.9",
|
||||
memory_used: "89.45",
|
||||
disk_used: "15.08",
|
||||
image_server_used: "33.94"
|
||||
}
|
||||
};
|
||||
|
||||
export const card9_data = {
|
||||
data: [
|
||||
{
|
||||
name: "节点1",
|
||||
value: 80
|
||||
},
|
||||
{
|
||||
name: "虚拟机1",
|
||||
value: 70
|
||||
},
|
||||
{
|
||||
name: "虚拟机2",
|
||||
value: 60
|
||||
},
|
||||
{
|
||||
name: "虚拟机3",
|
||||
value: 90
|
||||
},
|
||||
{
|
||||
name: "虚拟机4",
|
||||
value: 80
|
||||
},
|
||||
{
|
||||
name: "虚拟机5",
|
||||
value: 80
|
||||
},
|
||||
{
|
||||
name: "虚拟机6",
|
||||
value: 70
|
||||
},
|
||||
{
|
||||
name: "虚拟机7",
|
||||
value: 60
|
||||
},
|
||||
{
|
||||
name: "虚拟机8",
|
||||
value: 90
|
||||
},
|
||||
{
|
||||
name: "虚拟机9",
|
||||
value: 80
|
||||
},
|
||||
{
|
||||
name: "虚拟机10",
|
||||
value: 70
|
||||
},
|
||||
{
|
||||
name: "虚拟机11",
|
||||
value: 60
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
export const card10_data = {
|
||||
cloud_cpu_used_top5: [
|
||||
{ name: "xj-开发机-1", value: 96.19 },
|
||||
{ name: "Zstack-Cloud-Server1", value: 87.41 },
|
||||
{ name: "yt-开发机-1", value: 62.16 },
|
||||
{ name: "Zstack-Cloud-Server2", value: 60 },
|
||||
{ name: "Zstack-Cloud-Server3", value: 41 }
|
||||
],
|
||||
cloud_memory_used_top5: [
|
||||
{ name: "刘磊开发机-1", value: 96.19 },
|
||||
{ name: "Zstack-Cloud-Server1", value: 87.41 },
|
||||
{ name: "xintao-zstacas-server1", value: 62.16 },
|
||||
{ name: "gongnian-cloud-server2", value: 60 },
|
||||
{ name: "Zstack-Cloud-Server1", value: 41 }
|
||||
],
|
||||
local_cpu_used_top5: [
|
||||
{ name: "刘磊开发机-1", value: 96.19 },
|
||||
{ name: "Zstack-Cloud-Server1", value: 87.41 },
|
||||
{ name: "xintao-zstacas-server1", value: 62.16 },
|
||||
{ name: "gongnian-cloud-server2", value: 60 },
|
||||
{ name: "Zstack-Cloud-Server1", value: 41 }
|
||||
],
|
||||
local_memory_used_top5: [
|
||||
{ name: "刘磊开发机-1", value: 96.19 },
|
||||
{ name: "Zstack-Cloud-Server1", value: 87.41 },
|
||||
{ name: "xintao-zstacas-server1", value: 62.16 },
|
||||
{ name: "gongnian-cloud-server2", value: 60 },
|
||||
{ name: "Zstack-Cloud-Server1", value: 41 }
|
||||
]
|
||||
};
|
||||
@ -0,0 +1,109 @@
|
||||
.data-dashboard {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
/*background-image: url('src/assets/screen/bg1.png');*/
|
||||
|
||||
position: relative;
|
||||
/* 添加其他样式 */
|
||||
}
|
||||
|
||||
.data-dashboard-bg {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
/* 添加其他样式 */
|
||||
}
|
||||
section {
|
||||
position: absolute;
|
||||
/*border: red 1px solid;*/
|
||||
}
|
||||
|
||||
.dashboard-header {
|
||||
/* 样式 */
|
||||
}
|
||||
|
||||
.dashboard-content {
|
||||
/* 样式 */
|
||||
}
|
||||
|
||||
.dashboard-footer {
|
||||
/* 样式 */
|
||||
}
|
||||
|
||||
.header {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 66px;
|
||||
}
|
||||
|
||||
.card1 {
|
||||
top: 94px;
|
||||
left: 26px;
|
||||
width: 430px;
|
||||
height: 230px;
|
||||
}
|
||||
|
||||
.card2 {
|
||||
top: 340px;
|
||||
left: 26px;
|
||||
width: 430px;
|
||||
height: 230px;
|
||||
}
|
||||
.card3 {
|
||||
top: 584px;
|
||||
left: 26px;
|
||||
width: 430px;
|
||||
height: 230px;
|
||||
}
|
||||
.card4 {
|
||||
top: 94px;
|
||||
right: 26px;
|
||||
width: 430px;
|
||||
height: 230px;
|
||||
}
|
||||
.card5 {
|
||||
top: 340px;
|
||||
right: 26px;
|
||||
width: 430px;
|
||||
height: 230px;
|
||||
}
|
||||
|
||||
.card6 {
|
||||
top: 584px;
|
||||
right: 26px;
|
||||
width: 430px;
|
||||
height: 230px;
|
||||
}
|
||||
|
||||
.card7 {
|
||||
top: 94px;
|
||||
left: 610px;
|
||||
width: 700px;
|
||||
height: 278px;
|
||||
/*background: red;*/
|
||||
}
|
||||
|
||||
.card8 {
|
||||
top: 396px;
|
||||
left: 488px;
|
||||
width: 948px;
|
||||
height: 136px;
|
||||
}
|
||||
|
||||
.card9 {
|
||||
top: 548px;
|
||||
left: 488px;
|
||||
width: 948px;
|
||||
height: 266px;
|
||||
}
|
||||
|
||||
.card10 {
|
||||
bottom: 24px;
|
||||
left: 24px;
|
||||
width: 1872px;
|
||||
height: 230px;
|
||||
}
|
||||
@ -0,0 +1,272 @@
|
||||
<script setup lang="ts">
|
||||
// import { string } from "vue-types";
|
||||
import { reactive } from "vue";
|
||||
|
||||
const state = reactive({
|
||||
time_type_select: "month"
|
||||
});
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
is_date_select: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
|
||||
const is_date_selected_class = time_type => {
|
||||
if (state.time_type_select === time_type) {
|
||||
return "date-selected";
|
||||
} else {
|
||||
return "date-unselected";
|
||||
}
|
||||
};
|
||||
|
||||
const set_date_type = time_type => {
|
||||
state.time_type_select = time_type;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="box_container">
|
||||
<div class="box_header_line" />
|
||||
<div class="box_header">
|
||||
<div class="header_title">{{ props.title }}</div>
|
||||
<div class="header_time" v-if="is_date_select">
|
||||
<div
|
||||
@click="set_date_type('month')"
|
||||
:class="is_date_selected_class('month')"
|
||||
>
|
||||
月
|
||||
</div>
|
||||
<div
|
||||
@click="set_date_type('week')"
|
||||
:class="is_date_selected_class('week')"
|
||||
>
|
||||
周
|
||||
</div>
|
||||
<div
|
||||
@click="set_date_type('day')"
|
||||
:class="is_date_selected_class('day')"
|
||||
>
|
||||
日
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box_content">
|
||||
<div class="content">
|
||||
<slot name="content" :time_type="state.time_type_select" />
|
||||
</div>
|
||||
<div class="element1">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="3"
|
||||
viewBox="0 0 20 3"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M3.52755 0H19.5541L16.0265 3H0L3.52755 0Z"
|
||||
fill="#1FC6FF"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="element2" />
|
||||
<div class="element3">
|
||||
<div class="sub1" />
|
||||
<div class="sub2" />
|
||||
<div class="sub3" />
|
||||
</div>
|
||||
<div class="element4">
|
||||
<div class="sub1" />
|
||||
<div class="sub2-container">
|
||||
<div class="sub2" />
|
||||
<div class="sub2" />
|
||||
<div class="sub2" />
|
||||
</div>
|
||||
<div class="sub2-container">
|
||||
<div class="sub2" />
|
||||
<div class="sub2" />
|
||||
<div class="sub2" />
|
||||
</div>
|
||||
<div class="sub1" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.box_container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.box_header_line {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #136480;
|
||||
}
|
||||
|
||||
.box_header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 44px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgb(31 180 255 / 12%) 0%,
|
||||
rgb(31 180 255 / 0%) 100%
|
||||
);
|
||||
|
||||
.header_title {
|
||||
margin-left: 20px;
|
||||
font-family: "Helvetica Neue", Helvetica, "PingFang SC",
|
||||
"Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.header_time {
|
||||
display: flex;
|
||||
|
||||
.date-selected {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: flex-start;
|
||||
width: 38px;
|
||||
height: 28px;
|
||||
padding: 4px 12px;
|
||||
margin-left: 8px;
|
||||
font-family: "Helvetica Neue", Helvetica, "PingFang SC",
|
||||
"Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
color: #1fc6ff;
|
||||
cursor: pointer;
|
||||
background: #0f2839;
|
||||
border-top: 1px solid #1fc6ff;
|
||||
}
|
||||
|
||||
.date-unselected {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: flex-start;
|
||||
width: 38px;
|
||||
height: 28px;
|
||||
padding: 4px 12px;
|
||||
margin-left: 8px;
|
||||
font-family: "Helvetica Neue", Helvetica, "PingFang SC",
|
||||
"Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
color: #b4c0cc;
|
||||
cursor: pointer;
|
||||
background: #0f2839;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box_content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: calc(100% - 44px);
|
||||
background: rgb(5 18 48 / 20%);
|
||||
box-shadow: 0 2px 4px 0 rgb(31 198 255 / 20%) inset,
|
||||
2px 0 4px 0 rgb(31 198 255 / 20%) inset,
|
||||
0 -2px 4px 0 rgb(31 198 255 / 20%) inset,
|
||||
-2px 0 4px 0 rgb(31 198 255 / 20%) inset;
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.element1 {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.element2 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgb(31 199 255 / 0%) 0%,
|
||||
#1fc7ff 50.42%,
|
||||
rgb(31 199 255 / 0%) 94.9%
|
||||
);
|
||||
}
|
||||
|
||||
.element3 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
|
||||
.sub1 {
|
||||
width: 8px;
|
||||
height: 2px;
|
||||
margin-top: -2px;
|
||||
background: #1fc6ff;
|
||||
}
|
||||
|
||||
.sub2 {
|
||||
width: 8px;
|
||||
height: 2px;
|
||||
margin-top: -2px;
|
||||
margin-left: 2px;
|
||||
background: rgb(31 198 255 / 56%);
|
||||
}
|
||||
|
||||
.sub3 {
|
||||
width: 8px;
|
||||
height: 2px;
|
||||
margin-top: -2px;
|
||||
margin-left: 2px;
|
||||
background: rgb(31 198 255 / 24%);
|
||||
}
|
||||
}
|
||||
|
||||
.element4 {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
|
||||
.sub1 {
|
||||
width: 8px;
|
||||
height: 2px;
|
||||
background: rgb(31 198 255 / 56%);
|
||||
}
|
||||
|
||||
.sub2-container {
|
||||
display: flex;
|
||||
|
||||
.sub2 {
|
||||
width: 8px;
|
||||
height: 2px;
|
||||
margin-left: 2px;
|
||||
background: rgb(31 198 255 / 56%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div ref="elChart" style="width: 100%; height: 100%" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, onUpdated, onUnmounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
|
||||
const props = defineProps({
|
||||
option: {
|
||||
type: Object
|
||||
},
|
||||
data: {
|
||||
type: Object
|
||||
}
|
||||
});
|
||||
const elChart = ref();
|
||||
let chart: any = null;
|
||||
|
||||
function clear() {
|
||||
chart && chart.dispose();
|
||||
}
|
||||
|
||||
function draw() {
|
||||
clear();
|
||||
chart = echarts.init(elChart.value);
|
||||
chart.setOption(props.option);
|
||||
}
|
||||
|
||||
onMounted(draw);
|
||||
onUpdated(draw);
|
||||
onUnmounted(clear);
|
||||
</script>
|
||||
@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<div style="width: 100%; height: 180px">
|
||||
<div class="chart-style" style="width: 100%; height: 100%">
|
||||
<vue-chart :option="chartOption" style="width: 100%; height: 100%" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import VueChart from "../../components/VueChart.vue";
|
||||
import * as echarts from "echarts";
|
||||
|
||||
import { computed } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
time_type: {
|
||||
type: String,
|
||||
default: "month"
|
||||
},
|
||||
month_data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
week_data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
day_data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
});
|
||||
|
||||
const name_list = computed(() => {
|
||||
if (props.time_type === "month") {
|
||||
return props.month_data.map((item: any) => {
|
||||
return item.name;
|
||||
});
|
||||
} else if (props.time_type === "week") {
|
||||
return props.week_data.map((item: any) => {
|
||||
return item.name;
|
||||
});
|
||||
} else {
|
||||
return props.day_data.map((item: any) => {
|
||||
return item.name;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const value_list = computed(() => {
|
||||
if (props.time_type === "month") {
|
||||
return props.month_data.map((item: any) => {
|
||||
return item.value;
|
||||
});
|
||||
} else if (props.time_type === "week") {
|
||||
return props.week_data.map((item: any) => {
|
||||
return item.value;
|
||||
});
|
||||
} else {
|
||||
return props.day_data.map((item: any) => {
|
||||
return item.value;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const chartOption = computed(() => {
|
||||
return {
|
||||
grid: {
|
||||
top: "30px",
|
||||
left: "60px",
|
||||
bottom: "30px",
|
||||
right: "40px"
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: name_list.value,
|
||||
axisLabel: {
|
||||
color: "rgba(255, 255, 255, 0.40)"
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,0.2)"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(255, 255, 255, 0.40)"
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: value_list.value,
|
||||
type: "bar",
|
||||
barWidth: props.time_type === "day" ? "10px" : "20px",
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(0,249,189, 1)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(153,241,253, 1)"
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div style="width: 100%; height: 180px">
|
||||
<div class="header_title">
|
||||
<div class="title_text">最新入驻</div>
|
||||
</div>
|
||||
<div class="list_container scroll-container">
|
||||
<vue3-seamless-scroll :list="props.data" class="scroll" :step="0.5">
|
||||
<div class="list_box" v-for="(d, index) in props.data" :key="index">
|
||||
<div class="list_title_name">{{ d.name }}</div>
|
||||
<div :class="getDeviceStatusClass(d.value)">{{ d.value }}</div>
|
||||
</div>
|
||||
</vue3-seamless-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
|
||||
|
||||
interface DataItem {
|
||||
name: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
data: DataItem[];
|
||||
}>();
|
||||
|
||||
const getDeviceStatusClass = (status: string) => {
|
||||
if (status === "在线") {
|
||||
return "list_title_status_online";
|
||||
}
|
||||
return "list_title_status_offline";
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.header_title {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
width: 428px;
|
||||
height: 42px;
|
||||
padding: 10px 20px;
|
||||
background: #03234d;
|
||||
|
||||
.title_text {
|
||||
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
|
||||
"Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
color: rgb(255 255 255 / 80%);
|
||||
}
|
||||
}
|
||||
|
||||
.list_container {
|
||||
height: calc(100% - 42px);
|
||||
padding: 10px 20px;
|
||||
overflow-y: auto;
|
||||
|
||||
.list_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.list_title_name {
|
||||
font-family: "Helvetica Neue", Helvetica, "PingFang SC",
|
||||
"Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
color: rgb(255 255 255 / 80%);
|
||||
}
|
||||
|
||||
.list_title_status_online {
|
||||
font-family: "Helvetica Neue", Helvetica, "PingFang SC",
|
||||
"Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
color: #03ee97;
|
||||
}
|
||||
|
||||
.list_title_status_offline {
|
||||
font-family: "Helvetica Neue", Helvetica, "PingFang SC",
|
||||
"Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
color: #cc0909;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-container::-webkit-scrollbar {
|
||||
display: none; /* Chrome, Safari, and Opera */
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<div style="width: 100%; height: 180px">
|
||||
<div class="chart-style" style="width: 100%; height: 100%">
|
||||
<vue-chart :option="chartOption" style="width: 100%; height: 100%" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import VueChart from "../../components/VueChart.vue";
|
||||
import * as echarts from "echarts";
|
||||
|
||||
import { computed } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
month_data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
day_data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
});
|
||||
|
||||
const name_list = computed(() => {
|
||||
return props.data.map((item: any) => {
|
||||
return item.name;
|
||||
});
|
||||
});
|
||||
|
||||
const value_list = computed(() => {
|
||||
return props.data.map((item: any) => {
|
||||
return item.value;
|
||||
});
|
||||
});
|
||||
|
||||
const chartOption = computed(() => {
|
||||
return {
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: name_list.value,
|
||||
axisLabel: {
|
||||
color: "rgba(255, 255, 255, 0.60)"
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
position: "left",
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(255, 255, 255, 0.2)"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
formatter: "{value}", //右侧Y轴文字显示
|
||||
color: "rgba(255, 255, 255, 0.40)"
|
||||
}
|
||||
}
|
||||
],
|
||||
grid: {
|
||||
top: "30px",
|
||||
left: "60px",
|
||||
bottom: "20px",
|
||||
right: "40px"
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: value_list.value,
|
||||
type: "line",
|
||||
smooth: false,
|
||||
symbol: "circle", //标记的图形为实心圆
|
||||
symbolSize: 8, //标记的大小
|
||||
lineStyle: {
|
||||
width: 1
|
||||
},
|
||||
itemStyle: {
|
||||
//折线拐点标志的样式
|
||||
color: "#1FC6FF"
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(0,136,213, 1)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(0,164,249, 0)"
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,243 @@
|
||||
<template>
|
||||
<div style="width: 100%; height: 180px">
|
||||
<div class="chart-style" style="width: 100%; height: 100%">
|
||||
<vue-chart :option="chartOption" style="width: 100%; height: 100%" />
|
||||
<div class="menu_select">
|
||||
<div
|
||||
v-for="(i_name, index) in menus"
|
||||
:key="index"
|
||||
style="display: flex; flex-direction: column; align-items: center"
|
||||
>
|
||||
<div :class="changeMenuClass(i_name)" @click="clickMenu(i_name)">
|
||||
{{ i_name }}
|
||||
</div>
|
||||
<div v-if="isSelect(i_name)" class="menu_text_active_bottom" />
|
||||
</div>
|
||||
</div>
|
||||
<vue-chart :option="chartOption1" style="width: 100%; height: 100%" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import VueChart from "../../components/VueChart.vue";
|
||||
import * as echarts from "echarts";
|
||||
|
||||
import { computed, reactive } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
month_data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
day_data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
});
|
||||
|
||||
const menus = ["A项目缺陷数", "B项目缺陷数", "C项目缺陷数", "D项目缺陷数"];
|
||||
const state = reactive({
|
||||
menu_index: 0
|
||||
});
|
||||
|
||||
const clickMenu = (name: string) => {
|
||||
const index = menus.indexOf(name);
|
||||
if (index === -1) {
|
||||
state.menu_index = -1;
|
||||
}
|
||||
state.menu_index = index;
|
||||
};
|
||||
|
||||
const changeMenuClass = (name: string) => {
|
||||
const index = menus.indexOf(name);
|
||||
if (index === state.menu_index) {
|
||||
return "menu_text_active";
|
||||
}
|
||||
if (index === -1) {
|
||||
return "menu_text";
|
||||
}
|
||||
return "menu_text";
|
||||
};
|
||||
|
||||
const isSelect = (name: string) => {
|
||||
const index = menus.indexOf(name);
|
||||
if (index === state.menu_index) {
|
||||
return true;
|
||||
}
|
||||
if (index === -1) {
|
||||
return false;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const name_list = computed(() => {
|
||||
return props.data.map((item: any) => {
|
||||
return item.name;
|
||||
});
|
||||
});
|
||||
|
||||
const value_list = computed(() => {
|
||||
return props.data.map((item: any) => {
|
||||
return item.value;
|
||||
});
|
||||
});
|
||||
|
||||
const chartOption = computed(() => {
|
||||
return {
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: name_list.value,
|
||||
axisLabel: {
|
||||
color: "rgba(255, 255, 255, 0.60)"
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
position: "left",
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(255, 255, 255, 0.2)"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
formatter: "{value}", //右侧Y轴文字显示
|
||||
color: "rgba(255, 255, 255, 0.40)"
|
||||
}
|
||||
}
|
||||
],
|
||||
grid: {
|
||||
top: "30px",
|
||||
left: "60px",
|
||||
bottom: "20px",
|
||||
right: "40px"
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: value_list.value,
|
||||
type: "line",
|
||||
smooth: false,
|
||||
symbol: "circle", //标记的图形为实心圆
|
||||
symbolSize: 8, //标记的大小
|
||||
lineStyle: {
|
||||
width: 1
|
||||
},
|
||||
itemStyle: {
|
||||
//折线拐点标志的样式
|
||||
color: "#1FC6FF"
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(0,136,213, 1)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(0,164,249, 0)"
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
});
|
||||
|
||||
const chartOption1 = computed(() => {
|
||||
return {
|
||||
grid: {
|
||||
top: "30px",
|
||||
left: "60px",
|
||||
bottom: "30px",
|
||||
right: "40px"
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: name_list.value,
|
||||
axisLabel: {
|
||||
color: "rgba(255, 255, 255, 0.40)"
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,0.2)"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(255, 255, 255, 0.40)"
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: value_list.value,
|
||||
type: "bar",
|
||||
barWidth: "20px",
|
||||
itemStyle: {
|
||||
color: "#E5BF37"
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.menu_select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
height: 40px;
|
||||
margin-top: 20px;
|
||||
background: #03234d;
|
||||
|
||||
.menu_text {
|
||||
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
|
||||
"Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
color: rgb(255 255 255 / 80%);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu_text_active {
|
||||
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
|
||||
"Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
color: #00adff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu_text_active_bottom {
|
||||
width: 42px;
|
||||
height: 2px;
|
||||
margin-top: 2px;
|
||||
background: #00adff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,258 @@
|
||||
<template>
|
||||
<div class="data-dashboard">
|
||||
<div class="data-dashboard-bg">
|
||||
<img
|
||||
style="width: 1920px; height: 1080px; filter: brightness(60%)"
|
||||
src="/src/assets/screen/bg2.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<section class="header">
|
||||
<Header title="泰山石膏AI缺陷数据检测" />
|
||||
</section>
|
||||
<section class="card1">
|
||||
<BoxGroup title="分类警告" :is_date_select="true">
|
||||
<template v-slot:content="{ time_type }">
|
||||
<LineChart1
|
||||
:month_data="state.data.card1.data.month_data"
|
||||
:week_data="state.data.card1.data.week_data"
|
||||
:day_data="state.data.card1.data.day_data"
|
||||
:time_type="time_type"
|
||||
/>
|
||||
</template>
|
||||
</BoxGroup>
|
||||
</section>
|
||||
<section class="card2">
|
||||
<BoxGroup title="总缺陷数:859/总识别数">
|
||||
<template v-slot:content>
|
||||
<LineChartAndBarChart :data="state.data.card2.data" />
|
||||
</template>
|
||||
</BoxGroup>
|
||||
</section>
|
||||
<!-- <section class="card3"></section>-->
|
||||
<section class="card3">
|
||||
<BoxGroup title="5G数据用量(GB)" :is_date_select="true">
|
||||
<template v-slot:content="{ time_type }">
|
||||
<BarChart1
|
||||
:month_data="state.data.card3.data.month_data"
|
||||
:week_data="state.data.card3.data.week_data"
|
||||
:day_data="state.data.card3.data.day_data"
|
||||
:time_type="time_type"
|
||||
/>
|
||||
</template>
|
||||
</BoxGroup>
|
||||
</section>
|
||||
<section class="card4">
|
||||
<BoxGroup title="带宽使用(Mbps)">
|
||||
<template v-slot:content>
|
||||
<LineChart2 :data="state.data.card4.data" />
|
||||
</template>
|
||||
</BoxGroup>
|
||||
</section>
|
||||
<section class="card5">
|
||||
<BoxGroup title="设备在线数量(15/20)">
|
||||
<template v-slot:content>
|
||||
<DeviceOnline :data="state.data.card5.data" />
|
||||
</template>
|
||||
</BoxGroup>
|
||||
</section>
|
||||
<section class="card6">
|
||||
<BoxGroup title="GPU利用率">
|
||||
<template v-slot:content>
|
||||
<Pie3D
|
||||
:colors="['#065DFF', '#10FFE8']"
|
||||
:data="state.data.card6.data"
|
||||
/>
|
||||
</template>
|
||||
</BoxGroup>
|
||||
</section>
|
||||
<section class="card7">
|
||||
<BoxGroup title="CPU利用率">
|
||||
<template v-slot:content>
|
||||
<Pie3D
|
||||
:colors="['#f4ca40', '#1604df']"
|
||||
:data="state.data.card7.data"
|
||||
/>
|
||||
</template>
|
||||
</BoxGroup>
|
||||
</section>
|
||||
<section class="card8">
|
||||
<BoxGroup title="内存利用率">
|
||||
<template v-slot:content>
|
||||
<Pie3D
|
||||
:colors="['#f9a11d', '#13ffff']"
|
||||
:data="state.data.card8.data"
|
||||
/>
|
||||
</template>
|
||||
</BoxGroup>
|
||||
</section>
|
||||
<section class="card9">
|
||||
<BoxGroup title="存储占用">
|
||||
<template v-slot:content>
|
||||
<Pie3D
|
||||
:colors="['#FA3A6A', '#EEE150']"
|
||||
:data="state.data.card9.data"
|
||||
/>
|
||||
</template>
|
||||
</BoxGroup>
|
||||
</section>
|
||||
<section class="card10">
|
||||
<img src="src/assets/screen/bg_center.png" alt="" />
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Header from "@/views/screen1/components/Header.vue";
|
||||
import BoxGroup from "@/views/screen1/components/BoxGroup.vue";
|
||||
import LineChart1 from "@/views/screen1/components/charts/LineChart1.vue";
|
||||
import { reactive } from "vue";
|
||||
import {
|
||||
card1_data,
|
||||
card2_data,
|
||||
card3_data,
|
||||
card4_data,
|
||||
card5_data,
|
||||
card6_data,
|
||||
card7_data,
|
||||
card8_data,
|
||||
card9_data
|
||||
} from "./mock";
|
||||
import BarChart1 from "@/views/screen1/components/charts/BarChart1.vue";
|
||||
import LineChart2 from "@/views/screen1/components/charts/LineChart2.vue";
|
||||
import DeviceOnline from "@/views/screen1/components/charts/DeviceOnline.vue";
|
||||
import Pie3D from "@/views/screen1/components/charts/Pie3D.vue";
|
||||
import LineChartAndBarChart from "@/views/screen1/components/charts/LineChartAndBarChart.vue";
|
||||
|
||||
const randomIntFn = (min: number, max: number) => {
|
||||
return Math.floor(Math.random() * (max - min + 1) + min);
|
||||
};
|
||||
|
||||
// const randomFloatFn = (min: number, max: number) => {
|
||||
// return (Math.random() * (max - min + 1) + min).toFixed(2);
|
||||
// };
|
||||
|
||||
const state = reactive({
|
||||
data: {
|
||||
card1: card1_data,
|
||||
card2: card2_data,
|
||||
card3: card3_data,
|
||||
card4: card4_data,
|
||||
card5: card5_data,
|
||||
card6: card6_data,
|
||||
card7: card7_data,
|
||||
card8: card8_data,
|
||||
card9: card9_data
|
||||
}
|
||||
});
|
||||
|
||||
setInterval(() => {
|
||||
//card1
|
||||
setTimeout(() => {
|
||||
state.data.card1.data.month_data[0].data[0].value = randomIntFn(0, 500);
|
||||
state.data.card1.data.month_data[0].data[1].value = randomIntFn(0, 500);
|
||||
state.data.card1.data.month_data[0].data[2].value = randomIntFn(0, 500);
|
||||
state.data.card1.data.month_data[0].data[3].value = randomIntFn(0, 500);
|
||||
state.data.card1.data.month_data[0].data[4].value = randomIntFn(0, 500);
|
||||
state.data.card1.data.month_data[0].data[5].value = randomIntFn(0, 500);
|
||||
state.data.card1.data.month_data[0].data[6].value = randomIntFn(0, 500);
|
||||
state.data.card1.data.month_data[0].data[7].value = randomIntFn(0, 500);
|
||||
state.data.card1.data.month_data[0].data[8].value = randomIntFn(0, 500);
|
||||
state.data.card1.data.month_data[0].data[9].value = randomIntFn(0, 500);
|
||||
state.data.card1.data.month_data[0].data[10].value = randomIntFn(0, 500);
|
||||
state.data.card1.data.month_data[0].data[11].value = randomIntFn(0, 500);
|
||||
|
||||
state.data.card1.data.month_data[1].data[0].value = randomIntFn(0, 500);
|
||||
state.data.card1.data.month_data[1].data[1].value = randomIntFn(0, 500);
|
||||
state.data.card1.data.month_data[1].data[2].value = randomIntFn(0, 500);
|
||||
state.data.card1.data.month_data[1].data[3].value = randomIntFn(0, 500);
|
||||
state.data.card1.data.month_data[1].data[4].value = randomIntFn(0, 500);
|
||||
state.data.card1.data.month_data[1].data[5].value = randomIntFn(0, 500);
|
||||
state.data.card1.data.month_data[1].data[6].value = randomIntFn(0, 500);
|
||||
state.data.card1.data.month_data[1].data[7].value = randomIntFn(0, 500);
|
||||
state.data.card1.data.month_data[1].data[8].value = randomIntFn(0, 500);
|
||||
state.data.card1.data.month_data[1].data[9].value = randomIntFn(0, 500);
|
||||
state.data.card1.data.month_data[1].data[10].value = randomIntFn(0, 500);
|
||||
state.data.card1.data.month_data[1].data[11].value = randomIntFn(0, 500);
|
||||
|
||||
state.data.card1.data.month_data[2].data[0].value = randomIntFn(0, 500);
|
||||
state.data.card1.data.month_data[2].data[1].value = randomIntFn(0, 500);
|
||||
state.data.card1.data.month_data[2].data[2].value = randomIntFn(0, 500);
|
||||
state.data.card1.data.month_data[2].data[3].value = randomIntFn(0, 500);
|
||||
state.data.card1.data.month_data[2].data[4].value = randomIntFn(0, 500);
|
||||
state.data.card1.data.month_data[2].data[5].value = randomIntFn(0, 500);
|
||||
state.data.card1.data.month_data[2].data[6].value = randomIntFn(0, 500);
|
||||
state.data.card1.data.month_data[2].data[7].value = randomIntFn(0, 500);
|
||||
state.data.card1.data.month_data[2].data[8].value = randomIntFn(0, 500);
|
||||
state.data.card1.data.month_data[2].data[9].value = randomIntFn(0, 500);
|
||||
state.data.card1.data.month_data[2].data[10].value = randomIntFn(0, 500);
|
||||
state.data.card1.data.month_data[2].data[11].value = randomIntFn(0, 500);
|
||||
}, 100);
|
||||
//card2
|
||||
setTimeout(() => {
|
||||
state.data.card2.data[0].value = randomIntFn(0, 500);
|
||||
state.data.card2.data[1].value = randomIntFn(0, 500);
|
||||
state.data.card2.data[2].value = randomIntFn(0, 500);
|
||||
state.data.card2.data[3].value = randomIntFn(0, 500);
|
||||
state.data.card2.data[4].value = randomIntFn(0, 500);
|
||||
}, 200);
|
||||
|
||||
//card3
|
||||
setTimeout(() => {
|
||||
state.data.card3.data.month_data[0].value = randomIntFn(0, 1000);
|
||||
state.data.card3.data.month_data[1].value = randomIntFn(0, 1000);
|
||||
state.data.card3.data.month_data[2].value = randomIntFn(0, 1000);
|
||||
state.data.card3.data.month_data[3].value = randomIntFn(0, 1000);
|
||||
state.data.card3.data.month_data[4].value = randomIntFn(0, 1000);
|
||||
state.data.card3.data.month_data[5].value = randomIntFn(0, 1000);
|
||||
state.data.card3.data.month_data[6].value = randomIntFn(0, 1000);
|
||||
state.data.card3.data.month_data[7].value = randomIntFn(0, 1000);
|
||||
state.data.card3.data.month_data[8].value = randomIntFn(0, 1000);
|
||||
state.data.card3.data.month_data[9].value = randomIntFn(0, 1000);
|
||||
state.data.card3.data.month_data[10].value = randomIntFn(0, 1000);
|
||||
state.data.card3.data.month_data[11].value = randomIntFn(0, 1000);
|
||||
}, 300);
|
||||
|
||||
//card4
|
||||
|
||||
setTimeout(() => {
|
||||
state.data.card4.data[0].value = randomIntFn(0, 500);
|
||||
state.data.card4.data[1].value = randomIntFn(0, 500);
|
||||
state.data.card4.data[2].value = randomIntFn(0, 500);
|
||||
state.data.card4.data[3].value = randomIntFn(0, 500);
|
||||
state.data.card4.data[4].value = randomIntFn(0, 500);
|
||||
}, 400);
|
||||
|
||||
//card5
|
||||
|
||||
//card6
|
||||
setTimeout(() => {
|
||||
state.data.card6.data[0].value = randomIntFn(0, 500);
|
||||
state.data.card6.data[1].value = randomIntFn(0, 500);
|
||||
}, 600);
|
||||
|
||||
//card7
|
||||
setTimeout(() => {
|
||||
state.data.card7.data[0].value = randomIntFn(0, 500);
|
||||
state.data.card7.data[1].value = randomIntFn(0, 500);
|
||||
}, 700);
|
||||
|
||||
//card8
|
||||
setTimeout(() => {
|
||||
state.data.card8.data[0].value = randomIntFn(0, 500);
|
||||
state.data.card8.data[1].value = randomIntFn(0, 500);
|
||||
}, 800);
|
||||
|
||||
//card9
|
||||
setTimeout(() => {
|
||||
state.data.card9.data[0].value = randomIntFn(0, 500);
|
||||
state.data.card9.data[1].value = randomIntFn(0, 500);
|
||||
}, 900);
|
||||
|
||||
//card10
|
||||
}, 10000);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import url("./style.css");
|
||||
</style>
|
||||
@ -0,0 +1,318 @@
|
||||
export const card1_data = {
|
||||
data: {
|
||||
month_data: [
|
||||
{
|
||||
data: [
|
||||
{ name: "1", value: 150 },
|
||||
{ name: "2", value: 60 },
|
||||
{ name: "3", value: 120 },
|
||||
{ name: "4", value: 90 },
|
||||
{ name: "5", value: 210 },
|
||||
{ name: "6", value: 150 },
|
||||
{ name: "7", value: 60 },
|
||||
{ name: "8", value: 120 },
|
||||
{ name: "9", value: 90 },
|
||||
{ name: "10", value: 210 },
|
||||
{ name: "11", value: 150 },
|
||||
{ name: "12", value: 60 }
|
||||
]
|
||||
},
|
||||
{
|
||||
data: [
|
||||
{ name: "1", value: 200 },
|
||||
{ name: "2", value: 110 },
|
||||
{ name: "3", value: 170 },
|
||||
{ name: "4", value: 140 },
|
||||
{ name: "5", value: 260 },
|
||||
{ name: "6", value: 200 },
|
||||
{ name: "7", value: 110 },
|
||||
{ name: "8", value: 170 },
|
||||
{ name: "9", value: 140 },
|
||||
{ name: "10", value: 260 },
|
||||
{ name: "11", value: 200 },
|
||||
{ name: "12", value: 110 }
|
||||
]
|
||||
},
|
||||
{
|
||||
data: [
|
||||
{ name: "1", value: 250 },
|
||||
{ name: "2", value: 160 },
|
||||
{ name: "3", value: 220 },
|
||||
{ name: "4", value: 190 },
|
||||
{ name: "5", value: 310 },
|
||||
{ name: "6", value: 250 },
|
||||
{ name: "7", value: 160 },
|
||||
{ name: "8", value: 220 },
|
||||
{ name: "9", value: 190 },
|
||||
{ name: "10", value: 310 },
|
||||
{ name: "11", value: 250 },
|
||||
{ name: "12", value: 160 }
|
||||
]
|
||||
}
|
||||
],
|
||||
week_data: [
|
||||
{
|
||||
data: [
|
||||
{ name: "一", value: 150 },
|
||||
{ name: "二", value: 60 },
|
||||
{ name: "三", value: 120 },
|
||||
{ name: "四", value: 90 },
|
||||
{ name: "五", value: 210 },
|
||||
{ name: "六", value: 150 },
|
||||
{ name: "日", value: 60 }
|
||||
]
|
||||
},
|
||||
{
|
||||
data: [
|
||||
{ name: "一", value: 120 },
|
||||
{ name: "二", value: 110 },
|
||||
{ name: "三", value: 170 },
|
||||
{ name: "四", value: 140 },
|
||||
{ name: "五", value: 260 },
|
||||
{ name: "六", value: 200 },
|
||||
{ name: "日", value: 110 }
|
||||
]
|
||||
},
|
||||
{
|
||||
data: [
|
||||
{ name: "一", value: 250 },
|
||||
{ name: "二", value: 160 },
|
||||
{ name: "三", value: 220 },
|
||||
{ name: "四", value: 190 },
|
||||
{ name: "五", value: 310 },
|
||||
{ name: "六", value: 250 },
|
||||
{ name: "日", value: 160 }
|
||||
]
|
||||
}
|
||||
],
|
||||
day_data: [
|
||||
{
|
||||
data: [
|
||||
{ name: "1", value: 150 },
|
||||
{ name: "2", value: 60 },
|
||||
{ name: "3", value: 120 },
|
||||
{ name: "4", value: 90 },
|
||||
{ name: "5", value: 210 },
|
||||
{ name: "6", value: 150 },
|
||||
{ name: "7", value: 60 },
|
||||
{ name: "8", value: 120 },
|
||||
{ name: "9", value: 90 },
|
||||
{ name: "10", value: 210 },
|
||||
{ name: "11", value: 150 },
|
||||
{ name: "12", value: 60 },
|
||||
{ name: "13", value: 150 },
|
||||
{ name: "14", value: 60 },
|
||||
{ name: "15", value: 120 },
|
||||
{ name: "16", value: 90 },
|
||||
{ name: "17", value: 210 },
|
||||
{ name: "18", value: 150 },
|
||||
{ name: "19", value: 60 },
|
||||
{ name: "20", value: 120 },
|
||||
{ name: "21", value: 150 },
|
||||
{ name: "22", value: 60 },
|
||||
{ name: "23", value: 120 },
|
||||
{ name: "24", value: 90 },
|
||||
{ name: "25", value: 210 },
|
||||
{ name: "26", value: 150 },
|
||||
{ name: "27", value: 60 },
|
||||
{ name: "28", value: 120 },
|
||||
{ name: "29", value: 90 },
|
||||
{ name: "30", value: 210 },
|
||||
{ name: "31", value: 150 }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export const card2_data = {
|
||||
data: [
|
||||
{ name: "08:20", value: 150 },
|
||||
{ name: "10:00", value: 60 },
|
||||
{ name: "13:00", value: 120 },
|
||||
{ name: "15:00", value: 90 },
|
||||
{ name: "17:00", value: 210 }
|
||||
],
|
||||
detail: [
|
||||
{
|
||||
name: "A项目缺陷数",
|
||||
data: [
|
||||
{ name: "08:20", value: 150 },
|
||||
{ name: "10:00", value: 60 },
|
||||
{ name: "13:00", value: 120 },
|
||||
{ name: "15:00", value: 90 },
|
||||
{ name: "17:00", value: 210 }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "B项目缺陷数",
|
||||
data: [
|
||||
{ name: "08:20", value: 150 },
|
||||
{ name: "10:00", value: 60 },
|
||||
{ name: "13:00", value: 120 },
|
||||
{ name: "15:00", value: 90 },
|
||||
{ name: "17:00", value: 210 }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "C项目缺陷数",
|
||||
data: [
|
||||
{ name: "08:20", value: 150 },
|
||||
{ name: "10:00", value: 60 },
|
||||
{ name: "13:00", value: 120 },
|
||||
{ name: "15:00", value: 90 },
|
||||
{ name: "17:00", value: 210 }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "D项目缺陷数",
|
||||
data: [
|
||||
{ name: "08:20", value: 150 },
|
||||
{ name: "10:00", value: 60 },
|
||||
{ name: "13:00", value: 120 },
|
||||
{ name: "15:00", value: 90 },
|
||||
{ name: "17:00", value: 210 }
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
export const card3_data = {
|
||||
data: {
|
||||
month_data: [
|
||||
{ name: "1", value: 150 },
|
||||
{ name: "2", value: 60 },
|
||||
{ name: "3", value: 120 },
|
||||
{ name: "4", value: 90 },
|
||||
{ name: "5", value: 210 },
|
||||
{ name: "6", value: 150 },
|
||||
{ name: "7", value: 60 },
|
||||
{ name: "8", value: 120 },
|
||||
{ name: "9", value: 90 },
|
||||
{ name: "10", value: 210 },
|
||||
{ name: "11", value: 150 },
|
||||
{ name: "12", value: 60 }
|
||||
],
|
||||
week_data: [
|
||||
{ name: "一", value: 150 },
|
||||
{ name: "二", value: 60 },
|
||||
{ name: "三", value: 120 },
|
||||
{ name: "四", value: 90 },
|
||||
{ name: "五", value: 210 },
|
||||
{ name: "六", value: 150 },
|
||||
{ name: "日", value: 60 }
|
||||
],
|
||||
day_data: [
|
||||
{ name: "1", value: 150 },
|
||||
{ name: "2", value: 60 },
|
||||
{ name: "3", value: 120 },
|
||||
{ name: "4", value: 90 },
|
||||
{ name: "5", value: 210 },
|
||||
{ name: "6", value: 150 },
|
||||
{ name: "7", value: 60 },
|
||||
{ name: "8", value: 120 },
|
||||
{ name: "9", value: 90 },
|
||||
{ name: "10", value: 210 },
|
||||
{ name: "11", value: 150 },
|
||||
{ name: "12", value: 60 },
|
||||
{ name: "13", value: 150 },
|
||||
{ name: "14", value: 60 },
|
||||
{ name: "15", value: 120 },
|
||||
{ name: "16", value: 90 },
|
||||
{ name: "17", value: 210 },
|
||||
{ name: "18", value: 150 },
|
||||
{ name: "19", value: 60 },
|
||||
{ name: "20", value: 120 },
|
||||
{ name: "21", value: 150 },
|
||||
{ name: "22", value: 60 },
|
||||
{ name: "23", value: 120 },
|
||||
{ name: "24", value: 90 },
|
||||
{ name: "25", value: 210 },
|
||||
{ name: "26", value: 150 },
|
||||
{ name: "27", value: 60 },
|
||||
{ name: "28", value: 120 },
|
||||
{ name: "29", value: 90 },
|
||||
{ name: "30", value: 210 },
|
||||
{ name: "31", value: 150 }
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export const card4_data = {
|
||||
data: [
|
||||
{ name: "08:20", value: 150 },
|
||||
{ name: "10:00", value: 60 },
|
||||
{ name: "13:00", value: 120 },
|
||||
{ name: "15:00", value: 90 },
|
||||
{ name: "17:00", value: 210 }
|
||||
]
|
||||
};
|
||||
|
||||
export const card5_data = {
|
||||
data: [
|
||||
{ name: "CMR-025", value: "在线" },
|
||||
{ name: "CMR-026", value: "离线" },
|
||||
{ name: "CMR-027", value: "在线" },
|
||||
{ name: "CMR-028", value: "在线" },
|
||||
{ name: "CMR-029", value: "离线" },
|
||||
{ name: "CMR-029", value: "在线" },
|
||||
{ name: "CMR-029", value: "在线" }
|
||||
]
|
||||
};
|
||||
|
||||
export const card6_data = {
|
||||
data: [
|
||||
{ name: "已占用", value: 50 },
|
||||
{ name: "未占用", value: 100 }
|
||||
]
|
||||
};
|
||||
|
||||
export const card7_data = {
|
||||
data: [
|
||||
{ name: "已占用", value: 50 },
|
||||
{ name: "未占用", value: 80 }
|
||||
]
|
||||
};
|
||||
|
||||
export const card8_data = {
|
||||
data: [
|
||||
{ name: "已占用", value: 50 },
|
||||
{ name: "未占用", value: 60 }
|
||||
]
|
||||
};
|
||||
export const card9_data = {
|
||||
data: [
|
||||
{ name: "已占用", value: 40 },
|
||||
{ name: "未占用", value: 80 }
|
||||
]
|
||||
};
|
||||
export const card10_data = {
|
||||
cloud_cpu_used_top5: [
|
||||
{ name: "xj-开发机-1", value: 96.19 },
|
||||
{ name: "Zstack-Cloud-Server1", value: 87.41 },
|
||||
{ name: "yt-开发机-1", value: 62.16 },
|
||||
{ name: "Zstack-Cloud-Server2", value: 60 },
|
||||
{ name: "Zstack-Cloud-Server3", value: 41 }
|
||||
],
|
||||
cloud_memory_used_top5: [
|
||||
{ name: "刘磊开发机-1", value: 96.19 },
|
||||
{ name: "Zstack-Cloud-Server1", value: 87.41 },
|
||||
{ name: "xintao-zstacas-server1", value: 62.16 },
|
||||
{ name: "gongnian-cloud-server2", value: 60 },
|
||||
{ name: "Zstack-Cloud-Server1", value: 41 }
|
||||
],
|
||||
local_cpu_used_top5: [
|
||||
{ name: "刘磊开发机-1", value: 96.19 },
|
||||
{ name: "Zstack-Cloud-Server1", value: 87.41 },
|
||||
{ name: "xintao-zstacas-server1", value: 62.16 },
|
||||
{ name: "gongnian-cloud-server2", value: 60 },
|
||||
{ name: "Zstack-Cloud-Server1", value: 41 }
|
||||
],
|
||||
local_memory_used_top5: [
|
||||
{ name: "刘磊开发机-1", value: 96.19 },
|
||||
{ name: "Zstack-Cloud-Server1", value: 87.41 },
|
||||
{ name: "xintao-zstacas-server1", value: 62.16 },
|
||||
{ name: "gongnian-cloud-server2", value: 60 },
|
||||
{ name: "Zstack-Cloud-Server1", value: 41 }
|
||||
]
|
||||
};
|
||||
@ -0,0 +1,94 @@
|
||||
.data-dashboard {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
position: relative;
|
||||
/* 添加其他样式 */
|
||||
}
|
||||
|
||||
.data-dashboard-bg {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
/* 添加其他样式 */
|
||||
}
|
||||
section {
|
||||
position: absolute;
|
||||
/*border: red 1px solid;*/
|
||||
}
|
||||
|
||||
.header {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 66px;
|
||||
}
|
||||
|
||||
.card1 {
|
||||
top: 94px;
|
||||
left: 26px;
|
||||
width: 430px;
|
||||
height: 230px;
|
||||
}
|
||||
|
||||
.card2 {
|
||||
top: 340px;
|
||||
left: 26px;
|
||||
width: 430px;
|
||||
height: 474px;
|
||||
}
|
||||
.card3 {
|
||||
top: 94px;
|
||||
right: 26px;
|
||||
width: 430px;
|
||||
height: 230px;
|
||||
}
|
||||
.card4 {
|
||||
top: 340px;
|
||||
right: 26px;
|
||||
width: 430px;
|
||||
height: 230px;
|
||||
}
|
||||
|
||||
.card5 {
|
||||
top: 584px;
|
||||
right: 26px;
|
||||
width: 430px;
|
||||
height: 230px;
|
||||
}
|
||||
|
||||
.card6 {
|
||||
top: 828px;
|
||||
left: 26px;
|
||||
width: 456px;
|
||||
height: 230px;
|
||||
}
|
||||
|
||||
.card7 {
|
||||
top: 828px;
|
||||
left: 496px;
|
||||
width: 456px;
|
||||
height: 230px;
|
||||
}
|
||||
|
||||
.card8 {
|
||||
top: 828px;
|
||||
right: 496px;
|
||||
width: 456px;
|
||||
height: 230px;
|
||||
}
|
||||
|
||||
.card9 {
|
||||
top: 828px;
|
||||
right: 26px;
|
||||
width: 456px;
|
||||
height: 230px;
|
||||
}
|
||||
.card10 {
|
||||
top: 182px;
|
||||
left: 454px;
|
||||
width: 1012px;
|
||||
height: 552px;
|
||||
}
|
||||
Loading…
Reference in New Issue