tao.zhang/tianyi_DataV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

第二层图标

Browse Source
This commit is contained in:
MTrunning
2020-03-18 17:01:30 +08:00
parent 1053415c2e
commit b964ff666e
15 changed files with 1313 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/center.vue
+167
View File
@@ -0,0 +1,167 @@
<template>
<div id="center">
<div class="up">
<div class="bg-color-black item" v-for="item in titleItem" :key="item.title">
<p class="ml-3 fs-xl">{{item.title}}</p>
<div>
<dv-digital-flop :config="item.number" style="width:100px;height:50px;" />
</div>
</div>
</div>
<div class="down">
<div class="ranking">
<dv-scroll-ranking-board :config="ranking"/>
</div>
<div class="percent">
<div class="item"> </div>
<div class="water">
<dv-water-level-pond :config="water" style="height: 125px" />
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
titleItem: [
{
title: "今年累计构建次数",
number: {
number: [120],
toFixed: 1,
content: "{nt}"
}
},
{
title: "本月累计构建次数",
number: {
number: [18],
toFixed: 1,
content: "{nt}"
}
},
{
title: "今日累计构建次数",
number: {
number: [2],
toFixed: 1,
content: "{nt}"
}
},
{
title: "今年失败构建次数",
number: {
number: [14],
toFixed: 1,
content: "{nt}"
}
},
{
title: "今年成功构建次数",
number: {
number: [106],
toFixed: 1,
content: "{nt}"
}
},
{
title: "今年达标组件个数",
number: {
number: [100],
toFixed: 1,
content: "{nt}"
}
}
],
ranking: {
data: [
{
name: "周口",
value: 55
},
{
name: "南阳",
value: 120
},
{
name: "西峡",
value: 78
},
{
name: "驻马店",
value: 66
},
{
name: "新乡",
value: 80
},
{
name: "新乡",
value: 80
},
{
name: "新乡",
value: 80
},
{
name: "新乡",
value: 80
}
],
waitTime: 4000,
carousel: "page",
unit: "份"
},
water: {
data: [24, 45]
}
};
}
};
</script>
<style lang="scss" scoped>
#center {
display: flex;
flex-direction: column;
.up {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
.item {
border-radius: 5px;
padding-top: 1rem;
margin-top: 0.5rem;
width: 32%;
height: 70px;
}
}
.down {
padding: 0.5rem;
padding-bottom: 0px;
width: 100%;
display: flex;
height: 250px;
justify-content: space-between;
.ranking {
width: 58%;
}
.percent {
width: 40%;
display: flex;
flex-direction: column;
.item {
width: 100%;
height: 125px;
}
.water {
width: 100%;
}
}
}
}
</style>
src/views/centreLeft1.vue
+35 -25
View File
@@ -1,34 +1,37 @@
<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 id="centreLeft1">
<div class="bg-color-black">
<div class="d-flex pt-2 pl-2">
<span style="color:#5cd9e8">
<icon name="chart-bar"></icon>
</span>
<div class="d-flex">
<span class="coin">￥</span>
<dv-digital-flop :config="item.number" style="width:200px;height:50px;" />
<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">
<centreLeft1Chart />
</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>
<p class="text" style="text-align: center;">
{{item.text}}
<span class="colorYellow">(件)</span>
</p>
</div>
</div>
</div>
</template>
<script>
import centreLeft1Chart from "@/components/echart/centreLeft1Chart";
export default {
data() {
return {
@@ -96,6 +99,9 @@ export default {
]
};
},
components: {
centreLeft1Chart
},
mounted() {
this.changeTiming();
},
@@ -106,8 +112,8 @@ export default {
}, 3000);
},
changeNumber() {
this.numberData.forEach(item => {
item.number.number[0] += 1;
this.numberData.forEach((item, index) => {
item.number.number[0] += ++index;
item.number = { ...item.number };
});
}
@@ -118,9 +124,13 @@ export default {
<style lang="scss">
#centreLeft1 {
padding: 1rem;
height: 400px;
height: 410px;
min-width: 300px;
border-radius: 5px;
.bg-color-black {
height: 385px;
border-radius: 10px;
}
.text {
color: #c3cbde;
}
src/views/centreLeft2.vue
+57
View File
@@ -0,0 +1,57 @@
<template>
<div id="centreLeft1">
<div class="bg-color-black">
<div class="d-flex pt-2 pl-2">
<span style="color:#5cd9e8">
<icon name="chart-pie"></icon>
</span>
<div class="d-flex">
<span class="fs-xl text mx-2">全国数据流通情况</span>
<dv-decoration-1 style="width:100px;height:20px; position:relative;top:-3px;" />
</div>
</div>
<div class="d-flex jc-center">
<centreLeft2Chart />
</div>
</div>
</div>
</template>
<script>
import centreLeft2Chart from "@/components/echart/centreLeft2Chart";
export default {
data() {
return {
};
},
components: {
centreLeft2Chart
},
mounted() {},
methods: {}
};
</script>
<style lang="scss">
#centreLeft1 {
padding: 1rem;
height: 410px;
min-width: 300px;
border-radius: 5px;
.bg-color-black {
height: 385px;
border-radius: 10px;
}
.text {
color: #c3cbde;
}
.chart-box {
margin-top: 1rem;
width: 170px;
height: 170px;
.active-ring-name {
padding-top: 10px;
}
}
}
</style>
src/views/centreRight1.vue
+73
View File
@@ -0,0 +1,73 @@
<template>
<div id="centreRight1">
<div class="bg-color-black">
<div class="d-flex pt-2 pl-2">
<span style="color:#5cd9e8">
<icon name="chart-line"></icon>
</span>
<div class="d-flex">
<span class="fs-xl text mx-2">成功构建排行榜</span>
</div>
</div>
<div class="d-flex jc-center body-box">
<dv-scroll-board :config="config" style="width:270px;height:360px" />
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
config: {
header: ["组件", "分支", "覆盖率"],
data: [
["组件1", "dev-1", "<span class='colorGrass'>↑75%</span>"],
["组件2", "dev-2", "<span class='colorRed'>↓33%</span>"],
["组件3", "dev-3", "<span class='colorGrass'>↑100%</span>"],
["组件4", "rea-1", "<span class='colorGrass'>↑94%</span>"],
["组件5", "rea-2", "<span class='colorGrass'>↑95%</span>"],
["组件6", "fix-2", "<span class='colorGrass'>↑63%</span>"],
["组件7", "fix-4", "<span class='colorGrass'>↑84%</span>"],
["组件8", "fix-7", "<span class='colorRed'>↓46%</span>"],
["组件9", "dev-2", "<span class='colorRed'>↓13%</span>"],
["组件10", "dev-9", "<span class='colorGrass'>↑76%</span>"]
],
rowNum: 7, //表格行数
headerHeight: 35,
headerBGC: "#0f1325", //表头
oddRowBGC: "#0f1325", //奇数行
evenRowBGC: "#171c33", //偶数行
index: true,
columnWidth: [50],
align: ["center"]
}
};
},
components: {},
mounted() {},
methods: {}
};
</script>
<style lang="scss">
#centreRight1 {
padding: 1rem;
height: 410px;
min-width: 300px;
border-radius: 5px;
.bg-color-black {
height: 385px;
border-radius: 10px;
}
.text {
color: #c3cbde;
}
.body-box {
border-radius: 10px;
overflow: hidden;
}
}
</style>
src/views/centreRight2.vue
+77
View File
@@ -0,0 +1,77 @@
<template>
<div id="centreRight2">
<div class="bg-color-black">
<div class="d-flex pt-2 pl-2">
<span style="color:#5cd9e8">
<icon name="align-left"></icon>
</span>
<span class="fs-xl text mx-2">产品销售渠道分析</span>
</div>
<div class="d-flex jc-center body-box">
<dv-capsule-chart :config="config" style="width: 100%;height:160px" />
<!-- ---------------------------------------- -->
<centreRight2Chart1></centreRight2Chart1>
</div>
</div>
</div>
</template>
<script>
import centreRight2Chart1 from "@/components/echart/centreRight2/centreRight2Chart1";
export default {
data() {
return {
config: {
data: [
{
name: "南阳",
value: 167
},
{
name: "周口",
value: 67
},
{
name: "漯河",
value: 123
},
{
name: "郑州",
value: 55
},
{
name: "西峡",
value: 98
}
]
}
};
},
components: { centreRight2Chart1 },
mounted() {},
methods: {}
};
</script>
<style lang="scss">
#centreRight2 {
padding: 5px;
height: 400px;
min-width: 300px;
border-radius: 5px;
.bg-color-black {
padding: 5px;
height: 405px;
border-radius: 10px;
}
.text {
color: #c3cbde;
}
.body-box {
flex-direction: column;
border-radius: 10px;
overflow: hidden;
}
}
</style>
src/views/index.vue
+34 -14
View File
@@ -26,23 +26,26 @@
</div>
<!-- 第二行 -->
<div class="d-flex jc-between mt-2 px-2">
<div class="d-flex jc-between px-2">
<div class="d-flex" style="width: 40%">
<div class="react-right bg-color-black ml-4" style="width: 500px; ">
<div
class="react-right ml-4"
style="width: 500px; text-align: left;background-color: #0f1325;"
>
<span class="react-before"></span>
<span class="text">构建数据分析</span>
<span class="text fw-b">构建数据分析</span>
</div>
<div class="react-right bg-color-black ml-3">
<span class="text colorBlue">构建数据分析</span>
<div class="react-right ml-3" style="background-color: #0f1325;">
<span class="text colorBlue fw-b">构建数据分析</span>
</div>
</div>
<div style="width: 40%" class="d-flex">
<div class="react-left bg-color-black bg-color-blue mr-3">
<div class="react-left bg-color-blue mr-3">
<span class="text fw-b">构建数据分析</span>
</div>
<div class="react-left bg-color-black mr-4" style="width: 500px;">
<div class="react-left mr-4" style="width: 500px; background-color: #0f1325;">
<span class="react-after"></span>
<span class="text colorBlue">2020年03月16日</span>
<span class="text">2020年03月16日 周一 12:00</span>
</div>
</div>
</div>
@@ -55,11 +58,24 @@
<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>
<dv-border-box-12>
<centreLeft2 />
</dv-border-box-12>
</div>
<!-- 中间 -->
<div>
<center/>
</div>
<!-- 中间 -->
<div>
<centreRight2 />
</div>
<div>
<dv-border-box-13>
<centreRight1 />
</dv-border-box-13>
</div>
</div>
<!-- 第四行数据 -->
@@ -75,13 +91,17 @@
<script>
import centreLeft1 from "./centreLeft1";
import centreLeft2 from "./centreLeft2";
import centreRight1 from "./centreRight1";
import centreRight2 from "./centreRight2";
import center from "./center";
export default {
data() {
return {
loading: false
};
},
components: { centreLeft1 },
components: { centreLeft1, centreLeft2, centreRight1, centreRight2, center },
mounted() {
this.cancelLoading();
},