fix: 修改项目适配方案，使用scale缩放进行适配
This commit is contained in:
MTrun
+19
-22
@@ -2,8 +2,8 @@
|
||||
<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>
|
||||
<icon name="chart-bar" class="text-icon"></icon>
|
||||
</span>
|
||||
<div class="d-flex">
|
||||
<span class="fs-xl text mx-2">数据统计图</span>
|
||||
@@ -17,39 +17,36 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BottomLeftChart from "@/components/echart/bottom/bottomLeftChart";
|
||||
import BottomLeftChart from '@/components/echart/bottom/bottomLeftChart'
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
components: {
|
||||
BottomLeftChart
|
||||
},
|
||||
mounted() {},
|
||||
methods: {}
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
$box-height: 520px;
|
||||
$box-width: 100%;
|
||||
#bottomLeft {
|
||||
padding: 0.3rem 0.2rem;
|
||||
height: 6.5rem;
|
||||
min-width: 3.75rem;
|
||||
border-radius: 0.0625rem;
|
||||
padding: 20px 16px;
|
||||
height: $box-height;
|
||||
width: $box-width;
|
||||
border-radius: 5px;
|
||||
.bg-color-black {
|
||||
height: 6.0625rem;
|
||||
border-radius: 0.125rem;
|
||||
height: $box-height - 35px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.text {
|
||||
color: #c3cbde;
|
||||
}
|
||||
.chart-box {
|
||||
margin-top: 0.2rem;
|
||||
width: 2.125rem;
|
||||
height: 2.125rem;
|
||||
margin-top: 16px;
|
||||
width: 170px;
|
||||
height: 170px;
|
||||
.active-ring-name {
|
||||
padding-top: 0.125rem;
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
+18
-20
@@ -2,8 +2,8 @@
|
||||
<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>
|
||||
<icon name="chart-area" class="text-icon"></icon>
|
||||
</span>
|
||||
<div class="d-flex">
|
||||
<span class="fs-xl text mx-2">工单修复以及满意度统计图</span>
|
||||
@@ -22,40 +22,38 @@
|
||||
<script>
|
||||
import BottomRightChart from "@/components/echart/bottom/bottomRightChart";
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
components: {
|
||||
BottomRightChart
|
||||
},
|
||||
mounted() {},
|
||||
methods: {}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" class>
|
||||
$box-height: 520px;
|
||||
$box-width: 100%;
|
||||
#bottomRight {
|
||||
padding: 0.2rem 0.2rem 0;
|
||||
height: 6.5rem;
|
||||
min-width: 3.75rem;
|
||||
border-radius: 0.0625rem;
|
||||
padding: 14px 16px;
|
||||
height: $box-height;
|
||||
width: $box-width;
|
||||
border-radius: 5px;
|
||||
.bg-color-black {
|
||||
height: 6.1875rem;
|
||||
border-radius: 0.125rem;
|
||||
height: $box-height - 30px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.text {
|
||||
color: #c3cbde;
|
||||
} //下滑线动态
|
||||
}
|
||||
//下滑线动态
|
||||
.decoration2 {
|
||||
position: absolute;
|
||||
right: 0.125rem;
|
||||
}
|
||||
.chart-box {
|
||||
margin-top: 0.2rem;
|
||||
width: 2.125rem;
|
||||
height: 2.125rem;
|
||||
margin-top: 16px;
|
||||
width: 170px;
|
||||
height: 170px;
|
||||
.active-ring-name {
|
||||
padding-top: 0.125rem;
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+112
-64
@@ -1,32 +1,47 @@
|
||||
<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
|
||||
class="bg-color-black item"
|
||||
v-for="item in titleItem"
|
||||
:key="item.title"
|
||||
>
|
||||
<p class="ml-3 colorBlue fw-b fs-xl">{{ item.title }}</p>
|
||||
<div>
|
||||
<dv-digital-flop :config="item.number" style="width:1.25rem;height:.625rem;" />
|
||||
<dv-digital-flop
|
||||
class="dv-dig-flop ml-1 mt-2 pl-3"
|
||||
:config="item.number"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="down">
|
||||
<div class="ranking bg-color-black">
|
||||
<span style="color:#5cd9e8">
|
||||
<icon name="align-left"></icon>
|
||||
<span>
|
||||
<icon name="chart-pie" class="text-icon"></icon>
|
||||
</span>
|
||||
<span class="fs-xl text mx-2 mb-1">年度负责人组件达标榜</span>
|
||||
<dv-scroll-ranking-board :config="ranking" style="height:2.75rem" />
|
||||
<span class="fs-xl text mx-2 mb-1 pl-3">年度负责人组件达标榜</span>
|
||||
<dv-scroll-ranking-board class="dv-scr-rank-board mt-1" :config="ranking" />
|
||||
</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" />
|
||||
<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" />
|
||||
<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" />
|
||||
<dv-water-level-pond class="dv-wa-le-po" :config="water" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -34,152 +49,174 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CenterChart from "@/components/echart/center/centerChartRate";
|
||||
import CenterChart from '@/components/echart/center/centerChartRate'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
titleItem: [
|
||||
{
|
||||
title: "今年累计任务建次数",
|
||||
title: '今年累计任务建次数',
|
||||
number: {
|
||||
number: [120],
|
||||
toFixed: 1,
|
||||
content: "{nt}"
|
||||
textAlign: 'left',
|
||||
content: '{nt}',
|
||||
style: {
|
||||
fontSize: 26
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "本月累计任务次数",
|
||||
title: '本月累计任务次数',
|
||||
number: {
|
||||
number: [18],
|
||||
toFixed: 1,
|
||||
content: "{nt}"
|
||||
textAlign: 'left',
|
||||
content: '{nt}',
|
||||
style: {
|
||||
fontSize: 26
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "今日累计任务次数",
|
||||
title: '今日累计任务次数',
|
||||
number: {
|
||||
number: [2],
|
||||
toFixed: 1,
|
||||
content: "{nt}"
|
||||
textAlign: 'left',
|
||||
content: '{nt}',
|
||||
style: {
|
||||
fontSize: 26
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "今年失败任务次数",
|
||||
title: '今年失败任务次数',
|
||||
number: {
|
||||
number: [14],
|
||||
toFixed: 1,
|
||||
content: "{nt}"
|
||||
textAlign: 'left',
|
||||
content: '{nt}',
|
||||
style: {
|
||||
fontSize: 26
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "今年成功任务次数",
|
||||
title: '今年成功任务次数',
|
||||
number: {
|
||||
number: [106],
|
||||
toFixed: 1,
|
||||
content: "{nt}"
|
||||
textAlign: 'left',
|
||||
content: '{nt}',
|
||||
style: {
|
||||
fontSize: 26
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "今年达标任务个数",
|
||||
title: '今年达标任务个数',
|
||||
number: {
|
||||
number: [100],
|
||||
toFixed: 1,
|
||||
content: "{nt}"
|
||||
textAlign: 'left',
|
||||
content: '{nt}',
|
||||
style: {
|
||||
fontSize: 26
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
ranking: {
|
||||
data: [
|
||||
{
|
||||
name: "周口",
|
||||
name: '周口',
|
||||
value: 55
|
||||
},
|
||||
{
|
||||
name: "南阳",
|
||||
name: '南阳',
|
||||
value: 120
|
||||
},
|
||||
{
|
||||
name: "西峡",
|
||||
name: '西峡',
|
||||
value: 78
|
||||
},
|
||||
{
|
||||
name: "驻马店",
|
||||
name: '驻马店',
|
||||
value: 66
|
||||
},
|
||||
{
|
||||
name: "新乡",
|
||||
name: '新乡',
|
||||
value: 80
|
||||
},
|
||||
{
|
||||
name: "新乡2",
|
||||
name: '新乡2',
|
||||
value: 80
|
||||
},
|
||||
{
|
||||
name: "新乡3",
|
||||
name: '新乡3',
|
||||
value: 80
|
||||
},
|
||||
{
|
||||
name: "新乡4",
|
||||
name: '新乡4',
|
||||
value: 80
|
||||
},
|
||||
{
|
||||
name: "新乡5",
|
||||
name: '新乡5',
|
||||
value: 80
|
||||
},
|
||||
{
|
||||
name: "新乡6",
|
||||
name: '新乡6',
|
||||
value: 80
|
||||
},
|
||||
}
|
||||
],
|
||||
carousel: "single",
|
||||
unit: "人"
|
||||
carousel: 'single',
|
||||
unit: '人'
|
||||
},
|
||||
water: {
|
||||
data: [24, 45],
|
||||
shape: "roundRect",
|
||||
formatter: "{value}%",
|
||||
shape: 'roundRect',
|
||||
formatter: '{value}%',
|
||||
waveNum: 3
|
||||
},
|
||||
// 通过率和达标率的组件复用数据
|
||||
rate: [
|
||||
{
|
||||
id: "centerRate1",
|
||||
id: 'centerRate1',
|
||||
tips: 60,
|
||||
colorData: {
|
||||
textStyle: "#3fc0fb",
|
||||
textStyle: '#3fc0fb',
|
||||
series: {
|
||||
color: ["#00bcd44a", "transparent"],
|
||||
color: ['#00bcd44a', 'transparent'],
|
||||
dataColor: {
|
||||
normal: "#03a9f4",
|
||||
shadowColor: "#97e2f5"
|
||||
normal: '#03a9f4',
|
||||
shadowColor: '#97e2f5'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "centerRate2",
|
||||
id: 'centerRate2',
|
||||
tips: 40,
|
||||
colorData: {
|
||||
textStyle: "#67e0e3",
|
||||
textStyle: '#67e0e3',
|
||||
series: {
|
||||
color: ["#faf3a378", "transparent"],
|
||||
color: ['#faf3a378', 'transparent'],
|
||||
dataColor: {
|
||||
normal: "#ff9800",
|
||||
shadowColor: "#fcebad"
|
||||
normal: '#ff9800',
|
||||
shadowColor: '#fcebad'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
},
|
||||
components: {
|
||||
CenterChart
|
||||
// centerChart1,
|
||||
// centerChart2
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -192,26 +229,33 @@ export default {
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
.item {
|
||||
border-radius: 0.0625rem;
|
||||
padding-top: 0.2rem;
|
||||
margin-top: 0.1rem;
|
||||
border-radius: 6px;
|
||||
padding-top: 8px;
|
||||
margin-top: 8px;
|
||||
width: 32%;
|
||||
height: 0.875rem;
|
||||
height: 70px;
|
||||
.dv-dig-flop {
|
||||
width: 150px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.down {
|
||||
padding: 0.07rem 0.05rem;
|
||||
padding: 6px 4px;
|
||||
padding-bottom: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 3.1875rem;
|
||||
height: 255px;
|
||||
justify-content: space-between;
|
||||
.bg-color-black {
|
||||
border-radius: 0.0625rem;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.ranking {
|
||||
padding: 0.125rem;
|
||||
padding: 10px;
|
||||
width: 59%;
|
||||
.dv-scr-rank-board {
|
||||
height: 225px;
|
||||
}
|
||||
}
|
||||
.percent {
|
||||
width: 40%;
|
||||
@@ -219,17 +263,21 @@ export default {
|
||||
flex-wrap: wrap;
|
||||
.item {
|
||||
width: 50%;
|
||||
height: 1.5rem;
|
||||
height: 120px;
|
||||
span {
|
||||
margin-top: 0.0875rem;
|
||||
margin-top: 8px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.water {
|
||||
width: 100%;
|
||||
.dv-wa-le-po {
|
||||
height: 120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
+73
-42
@@ -2,12 +2,12 @@
|
||||
<div id="centerLeft1">
|
||||
<div class="bg-color-black">
|
||||
<div class="d-flex pt-2 pl-2">
|
||||
<span style="color:#5cd9e8">
|
||||
<icon name="chart-bar"></icon>
|
||||
<span>
|
||||
<icon name="chart-bar" class="text-icon"></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;" />
|
||||
<dv-decoration-3 class="dv-dec-3" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex jc-center">
|
||||
@@ -15,13 +15,17 @@
|
||||
</div>
|
||||
<!-- 4个主要的数据 -->
|
||||
<div class="bottom-data">
|
||||
<div class="item-box" v-for="(item,index) in numberData" :key="index">
|
||||
<div
|
||||
class="item-box mt-2"
|
||||
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;" />
|
||||
<dv-digital-flop class="dv-digital-flop" :config="item.number" />
|
||||
</div>
|
||||
<p class="text" style="text-align: center;">
|
||||
{{item.text}}
|
||||
{{ item.text }}
|
||||
<span class="colorYellow">(件)</span>
|
||||
</p>
|
||||
</div>
|
||||
@@ -31,7 +35,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CenterLeft1Chart from "@/components/echart/centerLeft/centerLeft1Chart";
|
||||
import CenterLeft1Chart from '@/components/echart/centerLeft/centerLeft1Chart'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@@ -40,99 +44,126 @@ export default {
|
||||
number: {
|
||||
number: [15],
|
||||
toFixed: 1,
|
||||
content: "{nt}"
|
||||
textAlign: 'left',
|
||||
content: '{nt}',
|
||||
style: {
|
||||
fontSize: 24
|
||||
}
|
||||
},
|
||||
text: "今日构建总量"
|
||||
text: '今日构建总量'
|
||||
},
|
||||
{
|
||||
number: {
|
||||
number: [1144],
|
||||
toFixed: 1,
|
||||
content: "{nt}"
|
||||
textAlign: 'left',
|
||||
content: '{nt}',
|
||||
style: {
|
||||
fontSize: 24
|
||||
}
|
||||
},
|
||||
text: "总共完成数量"
|
||||
text: '总共完成数量'
|
||||
},
|
||||
{
|
||||
number: {
|
||||
number: [361],
|
||||
toFixed: 1,
|
||||
content: "{nt}"
|
||||
textAlign: 'left',
|
||||
content: '{nt}',
|
||||
style: {
|
||||
fontSize: 24
|
||||
}
|
||||
},
|
||||
text: "正在编译数量"
|
||||
text: '正在编译数量'
|
||||
},
|
||||
{
|
||||
number: {
|
||||
number: [157],
|
||||
toFixed: 1,
|
||||
content: "{nt}"
|
||||
textAlign: 'left',
|
||||
content: '{nt}',
|
||||
style: {
|
||||
fontSize: 24
|
||||
}
|
||||
},
|
||||
text: "未通过数量"
|
||||
text: '未通过数量'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
},
|
||||
components: {
|
||||
CenterLeft1Chart
|
||||
},
|
||||
mounted() {
|
||||
this.changeTiming();
|
||||
this.changeTiming()
|
||||
},
|
||||
methods: {
|
||||
changeTiming() {
|
||||
setInterval(() => {
|
||||
this.changeNumber();
|
||||
}, 3000);
|
||||
this.changeNumber()
|
||||
}, 3000)
|
||||
},
|
||||
changeNumber() {
|
||||
this.numberData.forEach((item, index) => {
|
||||
item.number.number[0] += ++index;
|
||||
item.number = { ...item.number };
|
||||
});
|
||||
item.number.number[0] += ++index
|
||||
item.number = { ...item.number }
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
$box-width: 300px;
|
||||
$box-height: 410px;
|
||||
|
||||
#centerLeft1 {
|
||||
padding: 0.2rem;
|
||||
height: 5.125rem;
|
||||
min-width: 3.75rem;
|
||||
border-radius: 0.0625rem;
|
||||
padding: 16px;
|
||||
height: $box-height;
|
||||
width: $box-width;
|
||||
border-radius: 10px;
|
||||
.bg-color-black {
|
||||
height: 4.8125rem;
|
||||
border-radius: 0.125rem;
|
||||
height: $box-height - 30px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.text {
|
||||
color: #c3cbde;
|
||||
}
|
||||
.chart-box {
|
||||
margin-top: 0.2rem;
|
||||
width: 2.125rem;
|
||||
height: 2.125rem;
|
||||
.active-ring-name {
|
||||
padding-top: 0.125rem;
|
||||
}
|
||||
.dv-dec-3 {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
.bottom-data {
|
||||
.item-box {
|
||||
& > div {
|
||||
padding-right: 5px;
|
||||
}
|
||||
font-size: 14px;
|
||||
float: right;
|
||||
position: relative;
|
||||
width: 50%;
|
||||
color: #d3d6dd;
|
||||
.dv-digital-flop {
|
||||
width: 120px;
|
||||
height: 30px;
|
||||
}
|
||||
// 金币
|
||||
.coin {
|
||||
position: absolute;
|
||||
left: 0.1rem;
|
||||
top: 0.2125rem;
|
||||
font-size: 0.25rem;
|
||||
position: relative;
|
||||
top: 6px;
|
||||
font-size: 20px;
|
||||
color: #ffc107;
|
||||
}
|
||||
.colorYellow {
|
||||
color: yellowgreen;
|
||||
}
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
+22
-19
@@ -2,12 +2,12 @@
|
||||
<div id="centerLeft1">
|
||||
<div class="bg-color-black">
|
||||
<div class="d-flex pt-2 pl-2">
|
||||
<span style="color:#5cd9e8">
|
||||
<icon name="chart-pie"></icon>
|
||||
<span>
|
||||
<icon name="chart-pie" class="text-icon"></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;" />
|
||||
<dv-decoration-1 class="dv-dec-1" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex jc-center">
|
||||
@@ -20,36 +20,39 @@
|
||||
<script>
|
||||
import CenterLeft2Chart from "@/components/echart/centerLeft/centerLeft2Chart";
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
components: {
|
||||
CenterLeft2Chart
|
||||
},
|
||||
mounted() {},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
#centerLeft1 {
|
||||
padding: 0.2rem;
|
||||
height: 5.125rem;
|
||||
min-width: 3.75rem;
|
||||
border-radius: 0.0625rem;
|
||||
$box-width: 300px;
|
||||
$box-height: 410px;
|
||||
padding: 16px;
|
||||
height: $box-height;
|
||||
min-width: $box-width;
|
||||
border-radius: 5px;
|
||||
.bg-color-black {
|
||||
height: 4.8125rem;
|
||||
border-radius: 0.125rem;
|
||||
height: $box-height - 30px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.text {
|
||||
color: #c3cbde;
|
||||
}
|
||||
.dv-dec-1 {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
top: -3px;
|
||||
}
|
||||
.chart-box {
|
||||
margin-top: 0.2rem;
|
||||
width: 2.125rem;
|
||||
height: 2.125rem;
|
||||
margin-top: 16px;
|
||||
width: 170px;
|
||||
height: 170px;
|
||||
.active-ring-name {
|
||||
padding-top: 0.125rem;
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+36
-29
@@ -2,15 +2,15 @@
|
||||
<div id="centerRight1">
|
||||
<div class="bg-color-black">
|
||||
<div class="d-flex pt-2 pl-2">
|
||||
<span style="color:#5cd9e8">
|
||||
<icon name="chart-line"></icon>
|
||||
<span>
|
||||
<icon name="chart-line" class="text-icon"></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" />
|
||||
<dv-scroll-board class="dv-scr-board" :config="config" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -21,52 +21,59 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
config: {
|
||||
header: ["组件", "分支", "覆盖率"],
|
||||
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>"]
|
||||
['组件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", //偶数行
|
||||
headerBGC: '#0f1325', //表头
|
||||
oddRowBGC: '#0f1325', //奇数行
|
||||
evenRowBGC: '#171c33', //偶数行
|
||||
index: true,
|
||||
columnWidth: [50],
|
||||
align: ["center"]
|
||||
align: ['center']
|
||||
}
|
||||
};
|
||||
}
|
||||
},
|
||||
components: {},
|
||||
mounted() {},
|
||||
methods: {}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
$box-height: 410px;
|
||||
$box-width: 300px;
|
||||
#centerRight1 {
|
||||
padding: 0.2rem;
|
||||
height: 5.125rem;
|
||||
min-width: 3.75rem;
|
||||
border-radius: 0.0625rem;
|
||||
padding: 16px;
|
||||
padding-top: 20px;
|
||||
height: $box-height;
|
||||
width: $box-width;
|
||||
border-radius: 5px;
|
||||
.bg-color-black {
|
||||
height: 4.8125rem;
|
||||
border-radius: 0.125rem;
|
||||
height: $box-height - 30px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.text {
|
||||
color: #c3cbde;
|
||||
}
|
||||
.body-box {
|
||||
border-radius: 0.125rem;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
.dv-scr-board {
|
||||
width: 270px;
|
||||
height: 340px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
+30
-26
@@ -2,14 +2,13 @@
|
||||
<div id="centerRight2">
|
||||
<div class="bg-color-black">
|
||||
<div class="d-flex pt-2 pl-2">
|
||||
<span style="color:#5cd9e8">
|
||||
<icon name="align-left"></icon>
|
||||
<span>
|
||||
<icon name="align-left" class="text-icon"></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" />
|
||||
<!-- ---------------------------------------- -->
|
||||
<div class="d-flex ai-center flex-column body-box">
|
||||
<dv-capsule-chart class="dv-cap-chart" :config="config" />
|
||||
<centerRight2Chart1 />
|
||||
</div>
|
||||
</div>
|
||||
@@ -17,7 +16,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import centerRight2Chart1 from "@/components/echart/centerRight/centerRightChart";
|
||||
import centerRight2Chart1 from '@/components/echart/centerRight/centerRightChart'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@@ -25,52 +24,57 @@ export default {
|
||||
config: {
|
||||
data: [
|
||||
{
|
||||
name: "南阳",
|
||||
name: '南阳',
|
||||
value: 167
|
||||
},
|
||||
{
|
||||
name: "周口",
|
||||
name: '周口',
|
||||
value: 67
|
||||
},
|
||||
{
|
||||
name: "漯河",
|
||||
name: '漯河',
|
||||
value: 123
|
||||
},
|
||||
{
|
||||
name: "郑州",
|
||||
name: '郑州',
|
||||
value: 55
|
||||
},
|
||||
{
|
||||
name: "西峡",
|
||||
name: '西峡',
|
||||
value: 98
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
}
|
||||
},
|
||||
components: { centerRight2Chart1 },
|
||||
mounted() {},
|
||||
methods: {}
|
||||
};
|
||||
components: { centerRight2Chart1 }
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
#centerRight2 {
|
||||
padding: 0.0625rem;
|
||||
height: 5rem;
|
||||
min-width: 3.75rem;
|
||||
border-radius: 0.0625rem;
|
||||
$box-height: 410px;
|
||||
$box-width: 340px;
|
||||
padding: 5px;
|
||||
height: $box-height;
|
||||
width: $box-width;
|
||||
border-radius: 5px;
|
||||
.bg-color-black {
|
||||
padding: 0.0625rem;
|
||||
height: 5.0625rem;
|
||||
border-radius: 0.125rem;
|
||||
padding: 5px;
|
||||
height: $box-height;
|
||||
width: $box-width;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.text {
|
||||
color: #c3cbde;
|
||||
}
|
||||
.body-box {
|
||||
border-radius: 0.125rem;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
.dv-cap-chart {
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
+48
-46
@@ -1,54 +1,49 @@
|
||||
<template>
|
||||
<div id="index">
|
||||
<dv-full-screen-container class="bg">
|
||||
<div id="index" ref="appRef">
|
||||
<div 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;" />
|
||||
<dv-decoration-10 class="dv-dec-10" />
|
||||
<div class="d-flex jc-center">
|
||||
<dv-decoration-8 :color="['#568aea', '#000000']" style="width:2.5rem;height:.625rem;" />
|
||||
<dv-decoration-8 class="dv-dec-8" :color="['#568aea', '#000000']" />
|
||||
<div class="title">
|
||||
<span class="title-text">大数据可视化平台</span>
|
||||
<dv-decoration-6
|
||||
class="title-bototm"
|
||||
class="dv-dec-6"
|
||||
:reverse="true"
|
||||
:color="['#50e3c2', '#67a1e5']"
|
||||
style="width:3.125rem;height:.1rem;"
|
||||
/>
|
||||
</div>
|
||||
<dv-decoration-8
|
||||
class="dv-dec-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);" />
|
||||
<dv-decoration-10 class="dv-dec-10-s" />
|
||||
</div>
|
||||
|
||||
<!-- 第二行 -->
|
||||
<div class="d-flex jc-between px-2">
|
||||
<div class="d-flex" style="width: 40%">
|
||||
<div
|
||||
class="react-right ml-4"
|
||||
style="width: 6.25rem; text-align: left;background-color: #0f1325;"
|
||||
>
|
||||
<div class="d-flex aside-width">
|
||||
<div class="react-left ml-4 react-l-s">
|
||||
<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 class="react-right ml-3">
|
||||
<span class="text">数据分析2</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 40%" class="d-flex">
|
||||
<div class="react-left bg-color-blue mr-3">
|
||||
<div class="d-flex aside-width">
|
||||
<div class="react-right 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;"
|
||||
>
|
||||
<div class="react-right mr-4 react-l-s">
|
||||
<span class="react-after"></span>
|
||||
<span class="text">{{dateYear}} {{dateWeek}} {{dateDay}}</span>
|
||||
<span class="text"
|
||||
>{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -92,28 +87,32 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dv-full-screen-container>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import drawMixin from "../utils/drawMixin";
|
||||
import { formatTime } from '../utils/index.js'
|
||||
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";
|
||||
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 () {
|
||||
mixins: [ drawMixin ],
|
||||
data() {
|
||||
return {
|
||||
timing: null,
|
||||
loading: true,
|
||||
dateDay: null,
|
||||
dateYear: null,
|
||||
dateWeek: null,
|
||||
weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
|
||||
};
|
||||
weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
|
||||
}
|
||||
},
|
||||
components: {
|
||||
centerLeft1,
|
||||
@@ -124,27 +123,30 @@ export default {
|
||||
bottomLeft,
|
||||
bottomRight
|
||||
},
|
||||
mounted () {
|
||||
this.timeFn();
|
||||
this.cancelLoading();
|
||||
mounted() {
|
||||
this.timeFn()
|
||||
this.cancelLoading()
|
||||
},
|
||||
unMounted() {
|
||||
clearInterval(this.timing)
|
||||
},
|
||||
methods: {
|
||||
timeFn () {
|
||||
setInterval(() => {
|
||||
this.dateDay = formatTime(new Date(), 'HH: mm: ss');
|
||||
this.dateYear = formatTime(new Date(), 'yyyy-MM-dd');
|
||||
this.dateWeek = this.weekday[new Date().getDay()];
|
||||
timeFn() {
|
||||
this.timing = setInterval(() => {
|
||||
this.dateDay = formatTime(new Date(), 'HH: mm: ss')
|
||||
this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
|
||||
this.dateWeek = this.weekday[new Date().getDay()]
|
||||
}, 1000)
|
||||
},
|
||||
cancelLoading () {
|
||||
cancelLoading() {
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
}, 500);
|
||||
this.loading = false
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../assets/scss/index.scss';
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user