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

fix: 修改项目适配方案，使用scale缩放进行适配

Browse Source
This commit is contained in:
MTrun
2021-09-18 19:36:07 +08:00
parent 46e82cfc72
commit c69a48cc05
25 changed files with 572 additions and 543 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/center.vue
+112 -64
View File
@@ -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>