15 changed files with 368 additions and 1091 deletions
|
After Width: | Height: | Size: 804 KiB |
|
After Width: | Height: | Size: 71 KiB |
@ -0,0 +1,3 @@ |
|||||
|
<template> |
||||
|
<div class="buttom"></div> |
||||
|
</template> |
||||
@ -0,0 +1,5 @@ |
|||||
|
<template> |
||||
|
<div class="topnav"> |
||||
|
顶部信息 |
||||
|
</div> |
||||
|
</template> |
||||
@ -1,55 +0,0 @@ |
|||||
<template> |
|
||||
<div id="bottomLeft"> |
|
||||
<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="fs-xl text mx-2">数据统计图</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div> |
|
||||
<bottomLeftChart /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import bottomLeftChart from "@/components/echart/bottom/bottomLeftChart"; |
|
||||
export default { |
|
||||
data() { |
|
||||
return {}; |
|
||||
}, |
|
||||
components: { |
|
||||
bottomLeftChart |
|
||||
}, |
|
||||
mounted() {}, |
|
||||
methods: {} |
|
||||
}; |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss"> |
|
||||
#bottomLeft { |
|
||||
padding: 0.3rem 0.2rem; |
|
||||
height: 6.5rem; |
|
||||
min-width: 3.75rem; |
|
||||
border-radius: 0.0625rem; |
|
||||
.bg-color-black { |
|
||||
height: 6.0625rem; |
|
||||
border-radius: 0.125rem; |
|
||||
} |
|
||||
.text { |
|
||||
color: #c3cbde; |
|
||||
} |
|
||||
.chart-box { |
|
||||
margin-top: 0.2rem; |
|
||||
width: 2.125rem; |
|
||||
height: 2.125rem; |
|
||||
.active-ring-name { |
|
||||
padding-top: 0.125rem; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,62 +0,0 @@ |
|||||
<template> |
|
||||
<div id="bottomRight"> |
|
||||
<div class="bg-color-black"> |
|
||||
<div class="d-flex pt-2 pl-2"> |
|
||||
<span style="color:#5cd9e8"> |
|
||||
<icon name="chart-area"></icon> |
|
||||
</span> |
|
||||
<div class="d-flex"> |
|
||||
<span class="fs-xl text mx-2">工单修复以及满意度统计图</span> |
|
||||
<div class="decoration2"> |
|
||||
<dv-decoration-2 :reverse="true" style="width:5px;height:480px;" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div> |
|
||||
<bottomRightChart /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import bottomRightChart from "@/components/echart/bottom/bottomRightChart"; |
|
||||
export default { |
|
||||
data() { |
|
||||
return {}; |
|
||||
}, |
|
||||
components: { |
|
||||
bottomRightChart |
|
||||
}, |
|
||||
mounted() {}, |
|
||||
methods: {} |
|
||||
}; |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss"> |
|
||||
#bottomRight { |
|
||||
padding: 0.2rem 0.2rem 0; |
|
||||
height: 6.5rem; |
|
||||
min-width: 3.75rem; |
|
||||
border-radius: 0.0625rem; |
|
||||
.bg-color-black { |
|
||||
height: 6.1875rem; |
|
||||
border-radius: 0.125rem; |
|
||||
} |
|
||||
.text { |
|
||||
color: #c3cbde; |
|
||||
} //下滑线动态 |
|
||||
.decoration2 { |
|
||||
position: absolute; |
|
||||
right: 0.125rem; |
|
||||
} |
|
||||
.chart-box { |
|
||||
margin-top: 0.2rem; |
|
||||
width: 2.125rem; |
|
||||
height: 2.125rem; |
|
||||
.active-ring-name { |
|
||||
padding-top: 0.125rem; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,228 +0,0 @@ |
|||||
<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 colorBlue fw-b">{{item.title}}</p> |
|
||||
<div> |
|
||||
<dv-digital-flop :config="item.number" style="width:1.25rem;height:.625rem;" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="down"> |
|
||||
<div class="ranking bg-color-black"> |
|
||||
<span style="color:#5cd9e8"> |
|
||||
<icon name="align-left"></icon> |
|
||||
</span> |
|
||||
<span class="fs-xl text mx-2 mb-1">年度负责人组件达标榜</span> |
|
||||
<dv-scroll-ranking-board :config="ranking" style="height:2.75rem" /> |
|
||||
</div> |
|
||||
<div class="percent"> |
|
||||
<div class="item bg-color-black"> |
|
||||
<span>今日任务通过率</span> |
|
||||
<centerChart :id="rate[0].id" :tips="rate[0].tips" :colorObj="rate[0].colorData" /> |
|
||||
</div> |
|
||||
<div class="item bg-color-black"> |
|
||||
<span>今日任务达标率</span> |
|
||||
<centerChart :id="rate[1].id" :tips="rate[1].tips" :colorObj="rate[1].colorData" /> |
|
||||
</div> |
|
||||
<div class="water"> |
|
||||
<dv-water-level-pond :config="water" style="height: 1.5rem" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import centerChart from "@/components/echart/center/centerChartRate"; |
|
||||
|
|
||||
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], |
|
||||
shape: "roundRect", |
|
||||
formatter: "{value}%", |
|
||||
waveNum: 3 |
|
||||
}, |
|
||||
// 通过率和达标率的组件复用数据 |
|
||||
rate: [ |
|
||||
{ |
|
||||
id: "centerRate1", |
|
||||
tips: 60, |
|
||||
colorData: { |
|
||||
textStyle: "#3fc0fb", |
|
||||
series: { |
|
||||
color: ["#00bcd44a", "transparent"], |
|
||||
dataColor: { |
|
||||
normal: "#03a9f4", |
|
||||
shadowColor: "#97e2f5" |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
{ |
|
||||
id: "centerRate2", |
|
||||
tips: 40, |
|
||||
colorData: { |
|
||||
textStyle: "#67e0e3", |
|
||||
series: { |
|
||||
color: ["#faf3a378", "transparent"], |
|
||||
dataColor: { |
|
||||
normal: "#ff9800", |
|
||||
shadowColor: "#fcebad" |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
] |
|
||||
}; |
|
||||
}, |
|
||||
components: { |
|
||||
centerChart |
|
||||
// centerChart1, |
|
||||
// centerChart2 |
|
||||
} |
|
||||
}; |
|
||||
</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: 0.0625rem; |
|
||||
padding-top: 0.2rem; |
|
||||
margin-top: 0.1rem; |
|
||||
width: 32%; |
|
||||
height: 0.875rem; |
|
||||
} |
|
||||
} |
|
||||
.down { |
|
||||
padding: 0.07rem 0.05rem; |
|
||||
padding-bottom: 0; |
|
||||
width: 100%; |
|
||||
display: flex; |
|
||||
height: 3.1875rem; |
|
||||
justify-content: space-between; |
|
||||
.bg-color-black { |
|
||||
border-radius: 0.0625rem; |
|
||||
} |
|
||||
.ranking { |
|
||||
padding: 0.125rem; |
|
||||
width: 59%; |
|
||||
} |
|
||||
.percent { |
|
||||
width: 40%; |
|
||||
display: flex; |
|
||||
flex-wrap: wrap; |
|
||||
.item { |
|
||||
width: 50%; |
|
||||
height: 1.5rem; |
|
||||
span { |
|
||||
margin-top: 0.0875rem; |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
} |
|
||||
} |
|
||||
.water { |
|
||||
width: 100%; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,166 +0,0 @@ |
|||||
<template> |
|
||||
<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="fs-xl text mx-2">任务通过率</span> |
|
||||
<dv-decoration-3 style="width:1.25rem;height:.25rem; position:relative;top:-.0375rem;" /> |
|
||||
</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:2.5rem;height:.625rem;" /> |
|
||||
</div> |
|
||||
<p class="text" style="text-align: center;"> |
|
||||
{{item.text}} |
|
||||
<span class="colorYellow">(件)</span> |
|
||||
</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import centreLeft1Chart from "@/components/echart/centerLeft2/centreLeft1Chart"; |
|
||||
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: "未通过数量" |
|
||||
} |
|
||||
] |
|
||||
}; |
|
||||
}, |
|
||||
components: { |
|
||||
centreLeft1Chart |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.changeTiming(); |
|
||||
}, |
|
||||
methods: { |
|
||||
changeTiming() { |
|
||||
setInterval(() => { |
|
||||
this.changeNumber(); |
|
||||
}, 3000); |
|
||||
}, |
|
||||
changeNumber() { |
|
||||
this.numberData.forEach((item, index) => { |
|
||||
item.number.number[0] += ++index; |
|
||||
item.number = { ...item.number }; |
|
||||
}); |
|
||||
} |
|
||||
} |
|
||||
}; |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss"> |
|
||||
#centreLeft1 { |
|
||||
padding: 0.2rem; |
|
||||
height: 5.125rem; |
|
||||
min-width: 3.75rem; |
|
||||
border-radius: 0.0625rem; |
|
||||
.bg-color-black { |
|
||||
height: 4.8125rem; |
|
||||
border-radius: 0.125rem; |
|
||||
} |
|
||||
.text { |
|
||||
color: #c3cbde; |
|
||||
} |
|
||||
.chart-box { |
|
||||
margin-top: 0.2rem; |
|
||||
width: 2.125rem; |
|
||||
height: 2.125rem; |
|
||||
.active-ring-name { |
|
||||
padding-top: 0.125rem; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.bottom-data { |
|
||||
.item-box { |
|
||||
float: right; |
|
||||
position: relative; |
|
||||
width: 50%; |
|
||||
color: #d3d6dd; |
|
||||
// 金币 |
|
||||
.coin { |
|
||||
position: absolute; |
|
||||
left: 0.1rem; |
|
||||
top: 0.2125rem; |
|
||||
font-size: 0.25rem; |
|
||||
color: #ffc107; |
|
||||
} |
|
||||
.colorYellow { |
|
||||
color: yellowgreen; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,56 +0,0 @@ |
|||||
<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:1.25rem;height:.25rem; position:relative;top:-.0375rem;" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="d-flex jc-center"> |
|
||||
<centreLeft2Chart /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import centreLeft2Chart from "@/components/echart/centerLeft2/centreLeft2Chart"; |
|
||||
export default { |
|
||||
data() { |
|
||||
return {}; |
|
||||
}, |
|
||||
components: { |
|
||||
centreLeft2Chart |
|
||||
}, |
|
||||
mounted() {}, |
|
||||
methods: {} |
|
||||
}; |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss"> |
|
||||
#centreLeft1 { |
|
||||
padding: 0.2rem; |
|
||||
height: 5.125rem; |
|
||||
min-width: 3.75rem; |
|
||||
border-radius: 0.0625rem; |
|
||||
.bg-color-black { |
|
||||
height: 4.8125rem; |
|
||||
border-radius: 0.125rem; |
|
||||
} |
|
||||
.text { |
|
||||
color: #c3cbde; |
|
||||
} |
|
||||
.chart-box { |
|
||||
margin-top: 0.2rem; |
|
||||
width: 2.125rem; |
|
||||
height: 2.125rem; |
|
||||
.active-ring-name { |
|
||||
padding-top: 0.125rem; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,72 +0,0 @@ |
|||||
<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:3.375rem;height:4.28rem" /> |
|
||||
</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: 0.2rem; |
|
||||
height: 5.125rem; |
|
||||
min-width: 3.75rem; |
|
||||
border-radius: 0.0625rem; |
|
||||
.bg-color-black { |
|
||||
height: 4.8125rem; |
|
||||
border-radius: 0.125rem; |
|
||||
} |
|
||||
.text { |
|
||||
color: #c3cbde; |
|
||||
} |
|
||||
.body-box { |
|
||||
border-radius: 0.125rem; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,76 +0,0 @@ |
|||||
<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" style=" margin-top: 0;"> |
|
||||
<dv-capsule-chart :config="config" style="width: 100%;height:2rem" /> |
|
||||
<!-- ---------------------------------------- --> |
|
||||
<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: 0.0625rem; |
|
||||
height: 5rem; |
|
||||
min-width: 3.75rem; |
|
||||
border-radius: 0.0625rem; |
|
||||
.bg-color-black { |
|
||||
padding: 0.0625rem; |
|
||||
height: 5.0625rem; |
|
||||
border-radius: 0.125rem; |
|
||||
} |
|
||||
.text { |
|
||||
color: #c3cbde; |
|
||||
} |
|
||||
.body-box { |
|
||||
border-radius: 0.125rem; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,137 +1,6 @@ |
|||||
<template> |
<template> |
||||
<div id="index"> |
<div id="index"> |
||||
<dv-full-screen-container class="bg"> |
|
||||
<dv-loading v-if="loading">Loading...</dv-loading> |
|
||||
<div v-else class="host-body"> |
|
||||
<div class="d-flex jc-center"> |
|
||||
<dv-decoration-10 style="width:33.3%;height:.0625rem;" /> |
|
||||
<div class="d-flex jc-center"> |
|
||||
<dv-decoration-8 :color="['#568aea', '#000000']" style="width:2.5rem;height:.625rem;" /> |
|
||||
<div class="title"> |
|
||||
<span class="title-text">大数据可视化平台</span> |
|
||||
<dv-decoration-6 |
|
||||
class="title-bototm" |
|
||||
:reverse="true" |
|
||||
:color="['#50e3c2', '#67a1e5']" |
|
||||
style="width:3.125rem;height:.1rem;" |
|
||||
/> |
|
||||
</div> |
|
||||
<dv-decoration-8 |
|
||||
:reverse="true" |
|
||||
:color="['#568aea', '#000000']" |
|
||||
style="width:2.5rem;height:.625rem;" |
|
||||
/> |
|
||||
</div> |
|
||||
<dv-decoration-10 style="width:33.3%;height:.0625rem; transform: rotateY(180deg);" /> |
|
||||
</div> |
|
||||
|
|
||||
<!-- 第二行 --> |
总览的内容 |
||||
<div class="d-flex jc-between px-2"> |
</div> |
||||
<div class="d-flex" style="width: 40%"> |
</template> |
||||
<div |
|
||||
class="react-right ml-4" |
|
||||
style="width: 6.25rem; text-align: left;background-color: #0f1325;" |
|
||||
> |
|
||||
<span class="react-before"></span> |
|
||||
<span class="text">数据分析1</span> |
|
||||
</div> |
|
||||
<div class="react-right ml-3" style="background-color: #0f1325;"> |
|
||||
<span class="text colorBlue">数据分析2</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div style="width: 40%" class="d-flex"> |
|
||||
<div class="react-left bg-color-blue mr-3"> |
|
||||
<span class="text fw-b">vue-big-screen</span> |
|
||||
</div> |
|
||||
<div |
|
||||
class="react-left mr-4" |
|
||||
style="width: 6.25rem; background-color: #0f1325; text-align: right;" |
|
||||
> |
|
||||
<span class="react-after"></span> |
|
||||
<span class="text">2020年03月16日 周一 12:00</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<div class="body-box"> |
|
||||
<!-- 第三行数据 --> |
|
||||
<div class="content-box"> |
|
||||
<div> |
|
||||
<dv-border-box-12> |
|
||||
<centerLeft1 /> |
|
||||
</dv-border-box-12> |
|
||||
</div> |
|
||||
<div> |
|
||||
<dv-border-box-12> |
|
||||
<centerLeft2 /> |
|
||||
</dv-border-box-12> |
|
||||
</div> |
|
||||
<!-- 中间 --> |
|
||||
<div> |
|
||||
<center /> |
|
||||
</div> |
|
||||
<!-- 中间 --> |
|
||||
<div> |
|
||||
<centerRight2 /> |
|
||||
</div> |
|
||||
<div> |
|
||||
<dv-border-box-13> |
|
||||
<centerRight1 /> |
|
||||
</dv-border-box-13> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<!-- 第四行数据 --> |
|
||||
<div class="bototm-box"> |
|
||||
<dv-border-box-13> |
|
||||
<bottomLeft /> |
|
||||
</dv-border-box-13> |
|
||||
<dv-border-box-12> |
|
||||
<bottomRight /> |
|
||||
</dv-border-box-12> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</dv-full-screen-container> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import centerLeft1 from "./centerLeft1"; |
|
||||
import centerLeft2 from "./centerLeft2"; |
|
||||
import centerRight1 from "./centerRight1"; |
|
||||
import centerRight2 from "./centerRight2"; |
|
||||
import center from "./center"; |
|
||||
import bottomLeft from "./bottomLeft"; |
|
||||
import bottomRight from "./bottomRight"; |
|
||||
export default { |
|
||||
data() { |
|
||||
return { |
|
||||
loading: true |
|
||||
}; |
|
||||
}, |
|
||||
components: { |
|
||||
centerLeft1, |
|
||||
centerLeft2, |
|
||||
centerRight1, |
|
||||
centerRight2, |
|
||||
center, |
|
||||
bottomLeft, |
|
||||
bottomRight |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.cancelLoading(); |
|
||||
}, |
|
||||
methods: { |
|
||||
cancelLoading() { |
|
||||
setTimeout(() => { |
|
||||
this.loading = false; |
|
||||
}, 500); |
|
||||
} |
|
||||
} |
|
||||
}; |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss"> |
|
||||
@import "../assets/scss/index.scss"; |
|
||||
</style> |
|
||||
Loading…
Reference in new issue