首个数据图表
This commit is contained in:
MTrunning
@@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<div id="centreLeft1" class="bg-color-black">
|
||||
<div class="d-flex">
|
||||
<span style="color:#5cd9e8">
|
||||
<icon name="chart-bar"></icon>
|
||||
</span>
|
||||
<div class="d-flex">
|
||||
<span class="fs-xl text mx-2">构建通过率</span>
|
||||
<dv-decoration-3 style="width:100px;height:20px; position:relative;top:-3px;" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex jc-center">
|
||||
<dv-active-ring-chart class="chart-box" :config="config" />
|
||||
</div>
|
||||
<!-- 4个主要的数据 -->
|
||||
<div class="bottom-data">
|
||||
<div class="item-box" v-for="(item,index) in numberData" :key="index">
|
||||
<div class="d-flex">
|
||||
<span class="coin">￥</span>
|
||||
<dv-digital-flop :config="item.number" style="width:200px;height:50px;" />
|
||||
</div>
|
||||
<p class="text" style="text-align: center;">
|
||||
{{item.text}}
|
||||
<span class="colorYellow">(件)</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
config: {
|
||||
lineWidth: 30,
|
||||
activeRadius: "80%",
|
||||
radius: "75%",
|
||||
activeTimeGap: 2000,
|
||||
data: [
|
||||
{
|
||||
name: "周口",
|
||||
value: 55
|
||||
},
|
||||
{
|
||||
name: "南阳",
|
||||
value: 120
|
||||
},
|
||||
{
|
||||
name: "西峡",
|
||||
value: 78
|
||||
},
|
||||
{
|
||||
name: "驻马店",
|
||||
value: 66
|
||||
},
|
||||
{
|
||||
name: "新乡",
|
||||
value: 80
|
||||
}
|
||||
]
|
||||
},
|
||||
numberData: [
|
||||
{
|
||||
number: {
|
||||
number: [15],
|
||||
toFixed: 1,
|
||||
content: "{nt}"
|
||||
},
|
||||
text: "今日构建总量"
|
||||
},
|
||||
{
|
||||
number: {
|
||||
number: [1144],
|
||||
toFixed: 1,
|
||||
content: "{nt}"
|
||||
},
|
||||
text: "总共完成数量"
|
||||
},
|
||||
{
|
||||
number: {
|
||||
number: [361],
|
||||
toFixed: 1,
|
||||
content: "{nt}"
|
||||
},
|
||||
text: "正在编译数量"
|
||||
},
|
||||
{
|
||||
number: {
|
||||
number: [157],
|
||||
toFixed: 1,
|
||||
content: "{nt}"
|
||||
},
|
||||
text: "未通过数量"
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.changeTiming();
|
||||
},
|
||||
methods: {
|
||||
changeTiming() {
|
||||
setInterval(() => {
|
||||
this.changeNumber();
|
||||
}, 3000);
|
||||
},
|
||||
changeNumber() {
|
||||
this.numberData.forEach(item => {
|
||||
item.number.number[0] += 1;
|
||||
item.number = { ...item.number };
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
#centreLeft1 {
|
||||
padding: 1rem;
|
||||
height: 400px;
|
||||
min-width: 300px;
|
||||
border-radius: 5px;
|
||||
.text {
|
||||
color: #c3cbde;
|
||||
}
|
||||
.chart-box {
|
||||
margin-top: 1rem;
|
||||
width: 170px;
|
||||
height: 170px;
|
||||
.active-ring-name {
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-data {
|
||||
.item-box {
|
||||
float: right;
|
||||
position: relative;
|
||||
width: 50%;
|
||||
color: #d3d6dd;
|
||||
// 金币
|
||||
.coin {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 17px;
|
||||
font-size: 2rem;
|
||||
color: #ffc107;
|
||||
}
|
||||
.colorYellow {
|
||||
color: yellowgreen;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+92
-2
@@ -1,10 +1,100 @@
|
||||
<template>
|
||||
<div>主页</div>
|
||||
<div id="index">
|
||||
<dv-full-screen-container class="bg">
|
||||
<dv-loading v-if="loading">Loading...</dv-loading>
|
||||
<div class="host-body">
|
||||
<div class="d-flex jc-center">
|
||||
<dv-decoration-10 style="width:33.3%;height:5px;" />
|
||||
<div class="d-flex jc-center">
|
||||
<dv-decoration-8 :color="['#568aea', '#000000']" style="width:200px;height:50px;" />
|
||||
<div class="title">
|
||||
<span class="title-text">SKCI数据可视化平台</span>
|
||||
<dv-decoration-6
|
||||
class="title-bototm"
|
||||
:reverse="true"
|
||||
:color="['#50e3c2', '#67a1e5']"
|
||||
style="width:250px;height:8px;"
|
||||
/>
|
||||
</div>
|
||||
<dv-decoration-8
|
||||
:reverse="true"
|
||||
:color="['#568aea', '#000000']"
|
||||
style="width:200px;height:50px;"
|
||||
/>
|
||||
</div>
|
||||
<dv-decoration-10 style="width:33.3%;height:5px;" />
|
||||
</div>
|
||||
|
||||
<!-- 第二行 -->
|
||||
<div class="d-flex jc-between mt-2 px-2">
|
||||
<div class="d-flex" style="width: 40%">
|
||||
<div class="react-right bg-color-black ml-4" style="width: 500px; ">
|
||||
<span class="react-before"></span>
|
||||
<span class="text">构建数据分析</span>
|
||||
</div>
|
||||
<div class="react-right bg-color-black ml-3">
|
||||
<span class="text colorBlue">构建数据分析</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 40%" class="d-flex">
|
||||
<div class="react-left bg-color-black bg-color-blue mr-3">
|
||||
<span class="text fw-b">构建数据分析</span>
|
||||
</div>
|
||||
<div class="react-left bg-color-black mr-4" style="width: 500px;">
|
||||
<span class="react-after"></span>
|
||||
<span class="text colorBlue">2020年03月16日</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="body-box">
|
||||
<!-- 第三行数据 -->
|
||||
<div class="content-box">
|
||||
<div>
|
||||
<dv-border-box-12>
|
||||
<centreLeft1 />
|
||||
</dv-border-box-12>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="bg-color-blue"></div>
|
||||
<div></div>
|
||||
<div class="bg-color-blue"></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<!-- 第四行数据 -->
|
||||
<div class="bototm-box">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dv-full-screen-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
import centreLeft1 from "./centreLeft1";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: false
|
||||
};
|
||||
},
|
||||
components: { centreLeft1 },
|
||||
mounted() {
|
||||
this.cancelLoading();
|
||||
},
|
||||
methods: {
|
||||
cancelLoading() {
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../assets/scss/index.scss";
|
||||
</style>
|
||||
Reference in New Issue
Block a user